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学习之路(1)-选择器
▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...
- jquery学习(一)
简单的jquery学习,首先在页面引入jquery <!-- 引入jquery --> <script src="js/jquery-1.8.3.js" type ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记(一):入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- 很不错的jQuery学习资料和实例
这些都是学习Jquery很不错的资料,整理了一下,分享给大家. 希望能对大家的学习有帮助. 帕兰 Noupe带来的51个最佳jQuery教程和实例, 向大家介绍了jQuery的一些基本概念和使用的相关 ...
- jquery学习以及下载链接
jquery学习链接 http://www.w3school.com.cn/jquery/jquery_intro.asp jquery 脚本库下载链接 http://jquery.com/downl ...
- 转载最佳JQuery学习网站
转载文章,原出处: http://www.gbin1.com/technology/jquery/learningjquerywebsites/ jQuery是目前最流行的 JavaScript ...
- JQuery学习笔记--01
JQuery使用的话,必做的一下件事就是下载JQuery库,才可以使用下载地址:http://jquery.com/ 下面就是引用JQuery库了: <script type="tex ...
随机推荐
- 自适应阈值分割—大津法(OTSU算法)C++实现
大津法是一种图像灰度自适应的阈值分割算法,是1979年由日本学者大津提出,并由他的名字命名的.大津法按照图像上灰度值的分布,将图像分成背景和前景两部分看待,前景就是我们要按照阈值分割出来的部分.背景和 ...
- 杂项:MIS(管理信息系统)
ylbtech-杂项:MIS(管理信息系统) 管理信息系统(Management Information System,简称MIS)是一个以人为主导,利用计算机硬件.软件.网络通信设备以及其他办公设备 ...
- Bayesian Regression
Thus we see that there are very close similarities between this Bayesian viewpoint and the conventio ...
- Cash Machine(多重背包)
http://poj.org/problem?id=1276 #include <stdio.h> #include <string.h> ; #define Max(a,b) ...
- jorgchart,帮助你生成组织结构图的
下载地址: http://yunpan.cn/c6pfenkmmFV2q 访问密码 8e29 演示链接: http://www.gbtags.com/gb/share/546.htm jstree. ...
- android service--delphixe 10.3
开发中的陷阱: 1. 别放什么 *.wav文件,这个 服务窗口不能随便放东西,不然铁定出现意想不到的结果,比如 无法运行,因为没 ui界面,随意都不知是啥问题. 2. 不能加载 datamodule ...
- Redis(五)-数据库
Redis是一个字典结构的存储服务器,而实际上一个Redis实例提供了多个用来存储数据的字典,客户端可以将制定的书存储在哪个字典中,这与关系书库实例中可以i创建多个数据库类似,所以可以将其中的每个字典 ...
- ThinkPHP5中的助手函数
load_trait:快速导入Traits,PHP5.5以上无需调用 /** * 快速导入Traits PHP5.5以上无需调用 * @param string $class trait库 * ...
- python--6、re模块
re模块 用于在正则表达式匹配操作. python中为了避免实现输出'\','\n'字符的转义问题(如正则表达式使用反斜杠" \ "来代表特殊形式或用作转义字符,这里跟Python ...
- Leetcode0037--Sudoku Solver 数独游戏
[转载请注明]http://www.cnblogs.com/igoslly/p/8719622.html 来看一下题目: Write a program to solve a Sudoku puzzl ...