详解jquery中$.ajax方法提交表单

代码如下:

function postdata(){                        //提交数据函数  
    $.ajax({                                //调用jquery的ajax方法  
        type: "POST",                       //设置ajax方法提交数据的形式  
        url: "ok.php",                      //把数据提交到ok.php  
        data: "writer="+$("#writer").val(), //输入框writer中的值作为提交的数据  
        success: function(msg){             //提交成功后的回调，msg变量是ok.php输出的内容。  
            alert("数据提交成功");            //如果有必要，可以把msg变量的值显示到某个DIV元素中  
        }  
    });  
}

jquery手册描述:
data 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
示例：

代码如下:

$.ajax({  
    type: "POST",  
    url: "some.php",  
    data: "name=John&location=Boston",  
    success: function(msg){  
        alert( "Data Saved: " + msg );  
    }  
});

这里data后面跟的参数可以用二种表式：一种是普通url传参的写法一样，还有一种就是写在json数组里，
上面示例data部分也可以这样写：data: {name:"John",location:"Boston"}。这二个用法有什么区别？

今天在开发中发现二者用法的细微差别。第一种我们用url传参，参数里面如果加带"&"这个符号的话，可能参数接收不到或不完整，如“ data: "name=John&location=Boston",”，

如果name的值是"john&smith"这样写可能就会有问题，我们可以用JS里面的encodeURIComponent()方法进行转义，

但如果用data: {name:"John",location:"Boston"}这种方式写的话就不需要进行转义，如果转义的话，接收的将是转义后的字符串

赞 (0)

相关推荐

  • jquery ajax 如何向jsp提交表单数据

    jquery ajax 如何向jsp提交表单数据

    AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职的时候屡被淘汰.我也是一个WEB程序开发者,当然我也要 "随波逐流"一把,不然饭碗不保啊! 之前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐.学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了 Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery.Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后

  • jQuery使用$.ajax提交表单完整实例

    本文实例讲述了jQuery使用$.ajax提交表单的方法.分享给大家供大家参考,具体如下: 首先,新建Login.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/199

  • jquery+ajax验证不通过也提交表单问题处理

    validationEngine给我们为前端的表单验证减少了很大的工作量.大部分情况我们使用validationEngine验证表单的形式有几种方式: 1 使用正常的表单提交.这种情况validationEngine验证不通过是不会提交表单的. 2 使用ajax提交表单,但是没有使用ajax验证. 这种方式也比较简单,在我们使用ajax请求前检查验证是否通过就可以,例如: 复制代码 代码如下: //验证不通过时return      if(!$("form#ajaxForm").val

  • Jquery中ajax提交表单几种方法(get、post两种方法)

    在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的方法.$get方式提交表单get() 方法通过远程HTTP ,下面我来介绍两个提交表单数据的方法. $get方式提交表单 get() 方法通过远程 HTTP GET 请求载入信息 格式 $(selector).get(url,data,success(response,status,xhr),dataType

  • js实现键盘Enter键提交表单的方法

    本文实例讲述了js实现键盘Enter键提交表单的方法.分享给大家供大家参考.具体实现方法如下: //执行键盘按键命令 function keyDown(e){ var keycode = 0; //IE浏览器 if(CheckBrowserIsIE()){ keycode = event.keyCode; }else{ //火狐浏览器 keycode = e.which; } if (keycode == 13 ) //回车键是13 { //document.getElementById("lo

  • Jquery基于Ajax方法自定义无刷新提交表单Form实例

    本文实例讲述了Jquery基于Ajax方法自定义无刷新提交表单Form的方法.分享给大家供大家参考.具体实现方法如下: Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法: 如Form代码如下: 复制代码 代码如下: <form id="Form1" action="action.aspx" method="pos

  • Ajax+FormData+javascript实现无刷新表单信息提交

    原理: dom收集表单信息,利用FormData快速收集表单信息 ,实例化表单数据对象 同时收集fm的表单域信息. var fd = new FormData(fm); //实例化对象 alert(fd); fd对象内部有收集的form表单域信息 ajax传递表单信息 1.静态显示页面代码 <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="t

  • 详细分析使用AngularJS编程中提交表单的方式

    详细分析使用AngularJS编程中提交表单的方式

    在AngularJS出现之前,很多开发者就面对了表单提交这一问题.由于提交表单的方式繁杂而不同,很容易令人疯掉--然而现在看来,依然会让人疯掉. 今天,我们会看一下过去使用PHP方式提交的表单,现在如何将其转换为使用Angular提交.使用Angular来处理表单,对我而言,是一个"啊哈"时刻(译者:表示了解或发现某事物的喜悦).即使它甚至都没有涉及多少Angular表层的东西,但是它却帮助用户看到表单提交之后的潜力,并且理解两种数据绑定方式. 我们会使用jQuery平台来进行这个处理

  • php+html5使用FormData对象提交表单及上传图片的方法

    php+html5使用FormData对象提交表单及上传图片的方法

    本文实例讲述了php+html5使用FormData对象提交表单及上传图片的方法.分享给大家供大家参考.具体分析如下: FormData 对象,可以把form中所有表单元素的name与value组成一个queryString,提交到后台.在使用Ajax提交时,使用FormData对象可以减少拼接queryString的工作量. 使用FormData对象 1.创建一个FormData空对象,然后使用append方法添加key/value 复制代码 代码如下: var formdata = new

  • 详解jquery中$.ajax方法提交表单

    复制代码 代码如下: function postdata(){                        //提交数据函数       $.ajax({                                //调用jquery的ajax方法           type: "POST",                       //设置ajax方法提交数据的形式           url: "ok.php",                   

  • 详解jQuery中ajax.load()方法

    jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector).load(URL,data,callback); load()函数用于从服务器加载数据,并使用返回的html内容替换当前匹配元素的内容. load()函数默认使用GET方式,如果提供了对象形式的数据,则自动转为POST方式. 因为默认使用的是Get请求方式,所以我们也可以在url加数据进行提交. 例

  • jquery.form.js异步提交表单详解

    本文实例为大家分享了jquery.form.js异步提交表单的具体代码,供大家参考,具体内容如下 引入脚本: <script type="text/javascript" src="/js/jquery.form.min.js"></script> <script src="/js/json2.js"></script> //前端代码: <form id="f1">

  • 使用ajax异步提交表单的几种方法总结

    这里介绍三种常用的提交方式 方式一 手工收集所有的用户输入,封装为大的"k1=v1&k2=v2-"键值对形式,使用$.post(url, data,fn)把数据提交给服务器 $.ajax({ type:'post', url:'Notice_noTipsNotice', data:'k1=v1&k2=v2...', cache:false, dataType:'json', success:function(data){ } }); 方式二 单序列化:$('#myfor

  • jQuery基于Ajax方式提交表单功能示例

    本文实例讲述了jQuery基于Ajax方式提交表单功能.分享给大家供大家参考,具体如下: 提交表单一般通过同步的方式提交,提交后页面刷新或跳转到新页面来显示服务器端返回的处理结果.如果表单提交后有另外的操作或业务需求需要还在这个页面上显示或处理,那么页面不能整体刷新,这时第一想到的就是采用ajax的方式提交表单.下面完整的介绍一个表单采用ajax方式提交的流程. 一.准备 1.页面引入jQuery文件 2.页面引入jQuery的表单插件jQuery.form.js 二.实施 1.页面中的表单 <

  • 使用JQuery实现Ctrl+Enter提交表单的方法

    有时候我们为了省事就操作键盘组合键去代替使用鼠标,我们今天就使用JQuery实现Ctrl+Enter提交表单. 我们发帖时,在内容输入框中输入完内容后,可以点击"提交"按钮来发表内容.可是,如果你够"懒",你可以不用动鼠标,只需按住键盘上的Ctrl+Enter键,即可提交表单,完成内容发布. 当然,由于输入框是一个多行文本输入框textarea,我们知道,在textarea中按Enter(回车)键可以换行,并不能直接提交表单(submit),而默认情况下,浏览器忽略

  • jquery实现Ctrl+Enter提交表单的方法

    本文实例讲述了jquery实现Ctrl+Enter提交表单的方法.分享给大家供大家参考.具体如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Text Box Enter</title> <style type="

  • 详解Vue返回值动态生成表单及提交数据的办法

    目录 主要解决的问题 一.后端返回的数据,提交到后端的数据格式如下: 二.vue前端代码如下: 总结 主要解决的问题 1.vue在循环的时候需要动态绑定不同的v-model:vue动态的表单,数据怎么绑定呢? 2.动态表单上所有name属性对应的键值对的形式提交到后端 一.后端返回的数据,提交到后端的数据格式如下: // 后端返回的数据,根据返回类型用对应的组件 [ { "componentType": "input", "componentName&qu

  • 详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法

    俗话说不作死就不会死,今天作死了一回,写了一个比较二逼的函数,遇到了同步Ajax引起的UI线程阻塞问题,在此记录一下. 事情起因是这样的,因为页面上有多个相似的异步请求动作,本着提高代码可重用性的原则,我封装了一个名为getData的函数,它接收不同参数,只负责获取数据,然后把数据return.基本的逻辑剥离出来是这样的: function getData1(){ var result; $.ajax({ url : 'p.php', async : false, success: functi

  • jquery的attr方法禁用表单元素禁用输入内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <ti

随机推荐