PHP+jquery+ajax

2010-07-16 01:58:46 228 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

jquery 的$.ajax() 与php后台交互看了菜鸟ajax的系列教程：对ajax有了初步的了解，但是我主要是想利用ajax与php做前后台交互的，所以便想着一步步实现这个想法，因为对ajax不是特别熟悉，所以写的都是菜鸟般的代码，见谅。。看了菜鸟的ajax系列教程，都没有讲到JQuery的$.ajax()方法怎么使用，希望有机会可以加上，让更多读者可以了解。但是W3School有这一节教程：http://www.w3sch 阅读详情

index.html
=============================================================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>推荐赠送</title>



<script type="text/javascript" src="jquery-1.2.6.pack.js.js"></script>

<script language="javascript">

$(document).ready(function(){

	$("#tjrid").blur(function(){

		var Mobile = /^((\(\d{3}\))|(\d{3}\-))?13\d{9}|15[0-9]\d{8}|18[0-9]\d{8}$/;	  		

		var tjrPhone = $.trim($("#tjrid").val());

		

		if(tjrPhone==null || "" == tjrPhone){

			$("#ts_tjr").html("<font color='green'>该项为可选项，可以不填写....</font>");

		}else if(!Mobile.test(tjrPhone)){

			$("#ts_tjr").html("<font color='red'>请输入号码，必须是手机号码....</font>");

		}else{

			$.ajax({

				type:"POST",

				url:"tjr_ajax.php",

				data:"phone="+tjrPhone+"&page=1",

				beforeSend:function(){},

				success:function(msg)

				{

					if(msg=="success"){

						$("#ts_tjr").html("<font color='green'>推荐人信息正确....</font>");

					}else{

						$("#tjrid").focus();

						$("#ts_tjr").html("<font color='red'>该用户不是嗨客用户，请重新输入....</font>"); 

					}

				},

				error:function()

				{

					$("#tjrid").focus();

					$("#ts_tjr").html("<span><font color='red'>验证失败...</font></span>");

				} 

			});

		}

	});

	

	$("#userid").blur(function(){

		var Mobile = /^((\(\d{3}\))|(\d{3}\-))?13\d{9}|15[0-9]\d{8}|18[0-9]\d{8}$/;				   

		var usePhone = $.trim($("#userid").val());

		

		if(usePhone==null || "" == usePhone){

			$("#ts_use").html("<font color='red'>请输入用户手机号码....</font>");

			$("#userid").focus();

		}else if(!Mobile.test(usePhone)){

			$("#ts_use").html("<font color='red'>请输入正确的用户号码，必须是手机号码....</font>");

			$("#userid").focus();

		}else{

			$.ajax({

				type:"GET",

				url:"tjr_ajax.php",

				data:"phone="+usePhone+"&page=2",

				

				success:function(msg)

				{

					if(msg=="success"){

						$("#ts_use").html("<font color='green'>该号码可用....</font>");

					}else{

						$("#userid").focus();

						$("#ts_use").html("<font color='red'>该号码已经是嗨客用户，请重新输入....</font>"); 

					}

				},

				error:function()

				{

					$("#userid").focus();

					$("#ts_use").html("<span><font color='red'>验证失败...</font></span>");

				} 

			});

		}

	});

});



function checkForm(obj)

{

	var Mobile = /^((\(\d{3}\))|(\d{3}\-))?13\d{9}|15[0-9]\d{8}|18[0-9]\d{8}$/



	if(document.getElementById('tjrid').value!='' && !Mobile.test(document.getElementById('tjrid').value)){

	   alert('请输入正确的推荐人号码，必须是手机号！');

	    obj.disable=false; 

	   return false;

	}else if(document.getElementById('userid').value==''){

	   alert('用户号码不能为空！');

	    obj.disable=false; 

	   return false;

	}else if(!Mobile.test(document.getElementById('userid').value)){

	   alert('请输入正确的用户号，必须是手机号码！');

	   obj.disable=false; 

	   return false;

	}

	

	document.all.form1.submit(); 

	return true;

}

</script>



<style type="text/css">

<!--

*{font-size:12px;}

-->

</style>

</head>



<body>

	<center>

	<form action="reship.php" method = "post" name="form1" onsubmit="return checkForm(this);">

	<table width="900" height="141" border="1">

  <tr>

    <td colspan="4">用户推荐注册信息：</td>

    </tr>

  <tr>

    <td width="295" height="19"> </td>

    <td width="95">推荐人号码：</td>

    <td width="120" align="left"><input type="text" name="trjPhone" id="tjrid" value="" size="15"/></td>

    <td width="362" align="left"><span id="ts_tjr"> </span></td>

  </tr>

  <tr>

    <td height="19"> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td>用户手机号：</td>

    <td align="left"><input type="text" name="userPhone" id="userid" value="" size="15"/><span style="color:#F00">*</span></td>

    <td align="left"><span id="ts_use"> </span></td>

  </tr>

  <tr>

    <td height="19"> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td height="19"> </td>

    <td align="center"><input type="submit" value="提交" id="submit" onclick=""/></td>

    <td align="center"><input type="reset"  value="取消"/></td>

    <td> </td>

  </tr>

</table>

    </form>

</center>



</body>

</html>

=============================================================================
tjr_ajax.php

<?php

	require_once('include/conn.php'); 

	header("Cache-Control: no-cache"); 

	$phone= $_REQUEST['phone'];

	$page = $_REQUEST['page'];

	$num  = 0;

	

	$sql   = "select * from tb_user where usermobile='$phone'";

	$query = mssql_query($sql);

	$n     = mssql_num_rows($query);

	

	if($page == 1 && $n > 0){

		$num = 1;

	}

	if($page == 2 && $n == 0){

		$num = 1;

	}

	

	if($num==1){

		echo "success";

	}else{

		echo "error";

	}	

?>