<?

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)的更多相关文章

  1. jQuery学习之路（1）-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  2. jquery学习（一）

    简单的jquery学习,首先在页面引入jquery <!-- 引入jquery --> <script src="js/jquery-1.8.3.js" type ...

  3. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  4. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  5. jQuery学习笔记（一）：入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

  6. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  7. 很不错的jQuery学习资料和实例

    这些都是学习Jquery很不错的资料,整理了一下,分享给大家. 希望能对大家的学习有帮助. 帕兰 Noupe带来的51个最佳jQuery教程和实例, 向大家介绍了jQuery的一些基本概念和使用的相关 ...

  8. jquery学习以及下载链接

    jquery学习链接 http://www.w3school.com.cn/jquery/jquery_intro.asp jquery 脚本库下载链接 http://jquery.com/downl ...

  9. 转载最佳JQuery学习网站

    转载文章,原出处: http://www.gbin1.com/technology/jquery/learningjquerywebsites/ jQuery是目前最流行的 JavaScript    ...

  10. JQuery学习笔记--01

    JQuery使用的话,必做的一下件事就是下载JQuery库,才可以使用下载地址:http://jquery.com/ 下面就是引用JQuery库了: <script type="tex ...

随机推荐

  1. HTTP权威协议笔记-8.集成点：网关、隧道及中继

    .8.1 网关 定义:网关类似与翻译器,它抽象出了一种能够到达资源的方法. 实用:网关可以自动将HTTP流量转换为其他协议,这样使用HTTP协议的一方就不需要了解其他协议,也可实现与其他程序或设备交互 ...

  2. 0420-mysql命令（数据库操作层级,建表,对表的操作）

    注意事项: 符号必须为英文. 数据库操作层级: 建表大全: #新建表zuoye1:drop table if exists zuoye1;create table zuoye1(    id int ...

  3. 在linux服务器centos上使用svn同步代码到项目中

    一.需求 1.在多人开发过程中代码的管理以及版本的控制是一个很重要的问题,因为在开发过程中我们可能会同时更改过某个文件或者更改过多个文件, 这会导致我们很容易发生错误.所以我们需要一个方式去管理我们的 ...

  4. vue 使用localStorage保存页面变量到浏览器变量中

    const STORAGE_KEY = 'todos-vuejs'//定义常量保存键值 export default{ fetch(){ return JSON.parse(window.localS ...

  5. 使用TortoiseSVN碰到的几个问题（2）-冲突解决， 图标重载

    8)解决冲突 冲突分为两种:文件冲突---当两名(或更多)开发人员修改了同一个文件中相邻或相同的行时就会发生文件冲突.下面的属性冲突应该也属于文件冲突. 树冲突---当一名开发人员移动.重命名.删除一 ...

  6. [hihocoder][Offer收割]编程练习赛50

    循环数组 计算a[i]的前缀和s[i],计算l[i]为1~i-1中最小的s值,r[i]为i~n中最大的s值. 则a[i]~a[n]满足性质的条件为r[i]-s[i-1]>0,a[1]~a[i-1 ...

  7. android指纹识别、拼图游戏、仿MIUI长截屏、bilibili最美创意等源码

    Android精选源码 一个动画效果的播放控件,播放,暂停,停止之间的动画 用 RxJava 实现 Android 指纹识别代码 Android仿滴滴打车(滴滴UI)源码 Android高仿哔哩哔哩动 ...

  8. SQL Server中，with as使用介绍

    一．WITH AS的含义      WITH AS短语,也叫做子查询部分(subquery factoring),可以让你做很多事情,定义一个SQL片断,该SQL片断会被整个SQL语句所用到.有的时候 ...

  9. 时序分析：KMP算法用于序列识别

    考研基础资料之一的<算法与数据结构>,KMP算法作为串匹配的基本算法,为必考题目之一.对于算法入门来说,也是复杂度稍高的一个基本算法. KMP算法作为串匹配的非暴力算法,是为了减少回溯而设 ...

  10. Swift - AnyClass，元类型和 .self

    在Swift中能够表示 “任意” 这个概念的除了 Any 和 AnyObject 以外,还有一个AnyClass.我们能够使用AnyClass协议作为任意类型实例的具体类型.AnyClass在Swif ...