Ajax Step By Step5

第五.【表单序列化】

Ajax 用的最多的地方莫过于表单操作,而传统的表单操作是通过 submit 提交将数据传 输到服务器端。如果使用 Ajax 异步处理的话,我们需要将每个表单元素逐个获取才方能提 交。这样工作效率就大大降低.

对比数据传输的差别:

//常规形式的表单提交
$(‘form input[type=button]‘).click(function(){
$.ajax({
type:‘POST‘,
url:‘test.php‘,
data:{
user:$(‘forminput[name=user]‘).val(),
email:$(‘form input[name=email]‘).val()
 },
 success:function(response,status,xhr)
{ alert(response); }
});
});

注意:当数据很多时user 和email位置获取数据容易出错。

怎么解决该问题呢??

方法为:使用表单序列化方法.serialize(),会智能的获取指定表单内的所有元素。这样,在面对大量表单元素时,会把表单元素内容序列化为字符串,然后再使用 Ajax 请求。

(2) //使用.serialize()序列化表单内容
$(‘forminput[type=button]‘).click(function(){
$.ajax({
type:‘POST‘,
url:‘test.php‘,
 data:$(‘form‘).serialize(),
 success:function(response,status,xhr)
{ alert(response); }
 })
});

特别注意:.serialize()方法不但可以序列化表单内的元素,还可以直接获取单选框、复选框和下拉 列表框等内容。

(2.1)//使用序列化得到选中的元素内容

$(‘:radio‘).click(function(){
$(‘#box‘).html(decodeURIComponent($(this).serialize())); // decodeURIComponent编码转换
});

知识点:返回 JSON 数据的方法:.serializeArray()。这个方法 可以直接把数据整合成键值对的 JSON 对象。

$(‘:radio‘).click(function(){
console.log($(this).serializeArray()); var json=$(this).serializeArray(); $(‘#box‘).html(json[0].value);
})

有时,我们可能会在同一个程序中多次调用$.ajax()方法。而它们很多参数都相同,这个时候我们可以使用 jQuery 提供的$.ajaxSetup()请求默认值来初始化参数。

$(‘forminput[type=button]‘).click(function(){
 $.ajaxSetup({
type:‘POST‘,
 url:‘test.php‘,
 data:$(‘form‘).serialize() });
 $.ajax({
success:function(response,status,xhr)
{ alert(response); }
});
});

在使用 data 属性传递的时候,如果是以对象形式传递键值对,可以使用$.param()方法 将对象转换为字符串键值对格式。

Var obj={a:1,b:2,c:3};
 var  form=$.param(obj);  //将obj json对象转成字符串键值对
alert(form);
时间: 2024-10-13 23:23:55

Ajax Step By Step5的相关文章

Ajax Step By Step1

Ajax 最关键的地方,就是实现异步请求.接受响应及执行回调. jQuery 对 Ajax 做了大量的封装,不需要去考虑浏览器兼容性, 对于封装的方式,jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通过这层封装了第二层有三种方法:.load().$.get()和$.post(),最高层是$.getScript()和$.getJSON()方法. 第一.[.load()方法] 参数的使用step by step(load 有三个(URL +data+callback) + 

Ajax Step By Step4

第四,[$.ajax()] $.ajax()是所有 ajax 方法中最底层的方法,所有其他方法都是基于$.ajax()方法的封装.这个方法只有一个参数,传递一个各个功能键值对的对象. $.ajax()方法对象参数表:   参数   类型               说明 url     String          发送请求的地址 type   String        请求方式:POST 或 GET,默认 GET data   Object 或 String  发送到服务器的数据,键值对字

Ajax Step By Step2

第二.[$.get()和$.post()方法] .load()方法是局部方法(有需要父$),因为他需要一个包含元素的 jQuery 对象作为前缀.而$.get()和 $.post()是全局方法,无须指定某个元素. (1)$.get()方法有四个参数,前面三个参数和.load()一样,多了一个第四参数 type,即服务器返回的内容格式:包括 xml.html.script.json.jsonp 和 text.第一个参数为必选参数, 后面三个为可选参数. (1.1)//使用$.get()异步返回 h

Ajax Step By Step3

第三[.$.getScript()和$.getJSON()] jQuery 提供了一组用于特定异步加载的方法:$.getScript(),用于加载特定的 JS 文件: $.getJSON(),用于专门加载 JSON 文件. 有时我们希望能够特定的情况再加载 JS 文件,而不是一开始把所有 JS 文件都加载了, 这时课时使用$.getScript()方法. 1.1)点击按钮后再加载 JS 文件 $('input').click(function() { $.getScript('test.js')

Spring Batch Hello World Example

Spring Batch is a framework for batch processing – execution of a series of jobs. In Spring Batch, A job consists of many steps and each step consists of a READ-PROCESS-WRITE task or single operation task (tasklet). For “READ-PROCESS-WRITE” process,

Python-RSA(公私钥制作,加解密,签名)

Signing data with the RSA algorithm Step1. Create private/public keypair (optional) openssl genrsa -out private.pem 1024  >private.pem This creates a key file called private.pem. This file actually have both the private and public keys, so you should

JavaScript 流程控制器

/* * 流程控制器 * 作者:caoke * */ class Step{ //初始化 constructor(stepArr,callback){ this.stepArr=stepArr; this.curIndex=0; this.hasRunTimes=Array(stepArr.length).fill(0); this.callback=callback; } callback(){ this.next() } // 运行当前流程 run(){ const step=this.st

Template methed

从目的来看 创建型(Creational)模式:将对象的部分创建工作 延迟到子对象类或者其他对象,从而应对需求变化为对象创建具体实现类型引来的冲击. 结构性(Structural)模式:通过类继承或者对象组合获得灵活的类结构,从而应对需求变化为对象的结构带来的冲击. 行为型(Behavioral 模式):通过类继承和对象组合来明确类与对象的责任,从而应对需求变化为多个交互对象的冲击 从范围来看: 类模型处理类和子类的动态关系 对象模式处理对象间的动态关系 从封装变化角度对模式分类 重构的关键技法

AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5

前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step-5 #切换分支 npm start #启动项目 2.什么是XHR和依赖注入(Dependency Injection)? 1)什么是XHR? XHR是XMLHttpRequest的简称,XMLHttpRequest 用于在后台与服务器交换数据,主要是为了实现在不重新加载整个网页的情况下,对网页的某部分进行更新.简单说,浏览器中URL