JQuery学习(5-AJAX1)

Posted cynchanpin

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery学习(5-AJAX1)相关的知识，希望对你有一定的参考价值。

<?
php
	
	/*
	* 保护AJAX请求的方式
	*/
	/*
	* 1. 防止表单的自己主动提交
	* 对表单的submit提交进行控制。
设置一个全局变量submitError,在进行验证的方法体中对submitError进行改动。
	* 若出错，submitError++; 若错误更正submitError--；提交之前。若submitError=0,则进行提交
	*/
	
?>
<!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" />
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<style>
	.pwd{
		width:200px;
		height:35px;
	}
</style> 
<title>无标题文档</title>
</head>

<body>
<form id="rg_user" >
	<div>
		<input type="password" size="12" id="rg_pwd" class="pwd" />
   		<div id="error_info" ></div>
    </div>
    <input type="submit" />
</form>

<script type="application/javascript">
	var submtError=0;
	/*
	* 提交前验证password是否为空
	*/
	$('input[type="submit"]').click(
		function(){
			var pwd_length=$('#rg_pwd').val().length;
			if(pwd_length==0){
				$('#error_info').html("password为空");
				submitError++;
			}
			if(submitError==0){
				$('rg_user').submit(
					function(e){
						e.preventDefault();
						//序列化表单数据
						var formData=$(this).serialize();
						$.post('php.php',formData,function(data){
								/*对server返回的数据进行操作*/
							});
					});
			}
		}
	)
	

</script>
</body>
</html>


JQuery的使用策略：

    首先是JQuery中Ajax的基础使用方式：

 $.ajax({
         url: "ajax_php.php",  //不须要加？
         type: "POST",
         data:{trans_data:my_data},    //能够直接使用A=B&C=D
         dataType: "json",    //对应的，数据类型能够写成 text    
         error: function(){  
             alert('Error loading XML document');  
         },  
         success: function(data,status){    //假设调用php成功  ,这里一般写一个參数就能够，表示接收的数据 
             alert(unescape(data));//解码，显示汉字
         }
     });

    能够使用success的响应。来给页面加入元素。也就是DOM操作。比方基础使用append：
$('#id').append("<div id='table'></div>");

    在绑定元素这一块，还须要介绍的是。要确保#id是存在的，比方说，你把这一段代码写到了html的开头，你不管怎样点击，他都没有你预期的操作，为什么呢？由于Document还没有载入这个元素，编译在载入之前。（当然。这样说我也不知道是否准确）

    事实上。这个时候有一个隐患，就是每次异步。页面都会追加一个节点div，这应该是我们不想看到的。我们肯定须要删除之前追加的div了。可是，删除节点的操作。是在$.ajax之前操作呢，还是在success函数内部首行操作呢，

    比方说。调用ajax的是一个input元素的blur事件，例如以下

$('input').blur(function(){
	$.ajax({});
})

    能够在ajax之前加入也能够在success追加节点之前加入，我认为加入到success还是更合理的。只是。也不能太片面，的结合需求，也许你的需求就是函数调用一次每次都的删除，这样就得保证ajax请求err的时候也能删除掉追加的节点了。

$("#id1,#id2").remove();

    文档说。删了之后元素事实上在jquery对象中依然存在的。


    仅仅说了client，也须要略微说一下server端，我们向server发送了数据。server通过$_POST之类的接收參数处理之后。怎么返回数据呢？当然，非常多都应该试过了。使用echo【哎扣】。但这样的方式无论怎么。都感觉比較低端，没水平，习惯使用echo返回text的数据。比方。client须要显示一个radiobutton，但前提是server端的这个用户是存在的，这时。我们就传递用户信息到server端。当然使用的是text格式，server端经过处理之后，仅仅须要返回一个

echo 1;//是否显示的Flg

    然后就是追加节点了。须要注意的是，要确保echo之后不会再有其它的输出。否则可能会有意想不到的情况，比方，异步返回了整个页面的源码。

    怎样指定数据的类型。说的比較宽泛了，事实上我就想记录一下两个属性：

contentType: "application/json; charset=utf-8",
dataType: "json",

    我可能用到最多的是dataType属性，官方解释：client期望server端返回的数据类型。返回的json怎样使用了，以下是抄袭别人的：也就是想说明。返回的json数据Jquery已经转换成了json对象，能够直接使用。

success: function( response ) 
{ 
	$( "input[ name = type ]:eq( " + response.type + " )" ).attr( "checked", "checked" );
	$( "input[ name = name ]" ).val( response.name );
	$( "input[ name = fname ]" ).val( response.fname );
	$( "input[ name = lname ]" ).val( response.lname );
	$( "input[ name = email ]" ).val( response.email );
	$( "input[ name = phone ]" ).val( response.phone );
	$( "input[ name = website ]" ).val( response.website );
	$( "#admin_member_img" ).attr( "src", "images/member_images/" + response.image );
}

    有必要说说data属性了。data属性。一般能够这么使用： 

data:{
	'name':'fh',
	'age':'22'
}

    当然也能够这么使用：可是以下的有时候不好使，事实上就是个人感觉不怎么好使。并且。我发现假设用这样的GET语句。firebug捕捉不到异步的请求，仅仅能使用抓包工具。这里须要补充一点就是中文的问题，ajax提交跟form表单提交有差别，一般使用encodeURI这个js函数来包装传递的值。

data:"name=fh&age=22"

    说到异步请求。有时候非常能出问题。比方，我在$.ajax()后面，还有运行： 

$ajax({});
console.log(....);

    这里非常easy出问题。由于ajax是异步的请求，程序遇到了ajax它可能就把ajax放一边运行去吧。接着运行console.log，一般来说，console.log（）这样写仅仅是例如，泛指ajax后面的操作。就是后面的操作运行一般在ajax之前完毕。这就easy被坑了，倘若我后面的代码要用到ajax中返回的数据，那是肯定undefined了。

    

    使ajax发送同步请求。默认属性为true，这样就发送同步请求了：

async :false

    延续上面的。接着说contentType：官方说：当发送数据到server时。使用这样的指定的数据类型，编码

contentType: "application/json; charset=utf-8",
contentType: "application/json",

   

    server端怎么返回，假设还是echo就有点蹩脚了，由于我们返回的时候没有指定返回的文件类型。如今我们以返回json格式的数据来举例。

<?
php
$array=array();
$returnJsonStr=json_encode($array);
header("Content-Type:appliation/json;charset=utf-8");
return $returnJsonStr
?>
    这里假设是在一个函数中，执行是能够的。可是在全局执行的环境中，我还没有试过。

return和exit在全局的环境中效果是一样的。唯一差别是。exit是终止了全部脚本的执行。而return仅仅是终止了当前文件内脚本的执行。假设return在include文件里引入，引用该文件的脚本并不会停止执行。




















以上是关于JQuery学习(5-AJAX1)的主要内容，如果未能解决你的问题，请参考以下文章

jQuery应用 代码片段

Visual Studio 2012-2019的130多个jQuery代码片段。

jQuery学习手册

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段（转）