AJax技术

深入理解ajax系列第九篇(2)

字号+ 作者:H5之家 来源:H5之家 2017-03-29 09:04 我要评论( )

get()方法的调用格式如下所示,url表示一个包含发送请求的URL字符串;data表示发送给服务器的字符串或Key/value键值对;success(data, textStatus, jqXHR)表示当请求成功后执行的回调函数;dataType表示从服务器返

  get()方法的调用格式如下所示,url表示一个包含发送请求的URL字符串;data表示发送给服务器的字符串或Key/value键值对;success(data, textStatus, jqXHR)表示当请求成功后执行的回调函数;dataType表示从服务器返回的预期的数据类型。默认:智能猜测(xml, json, script, 或 html)

jQuery.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

  相当于一个ajax功能的缩写

$.ajax({ url: url, data: data, success: success, dataType: dataType });

【使用参数】

  通过get()方法发送给服务器的key/value数据会作为查询字符串最终附加到URL中

评论:姓名:内容:已有评论: $((){ $.get(,{ username:$().val(), content:$().val() },function(data){ // }) })

【回调函数】

function(data,textStatus){ }

【数据格式】

  1、HTML片段

function(data,textStatus){ $(‘#resText‘).html(data); }

  2、XML文档

function(data,textStatus){ var username = $(data).find(‘comment‘).attr(‘username‘); var content = $(data).find(‘comment content‘).text(); var txtHtml = "<div class=‘comment‘><h6>" + username + ":</h6><p class=‘para‘>" + content + "</p></div>"; $(‘#resText‘).html(txtHtml); }

  3、JSON 

function(data,textStatus){ var username = data.username; var content = data.content; var txtHtml = "<div class=‘comment‘><h6>" + username + ":</h6><p class=‘para‘>" + content + "</p></div>"; $(‘#resText‘).html(txtHtml); }

1234测试 $((){ $.get(,{ num: $().val() },function(data){ $( data) }) }) php $num = $_REQUEST[‘num‘]; if($num % 2 == 0){ echo ‘偶数‘; }else{ echo ‘奇数‘; } ?>

 

post()

  post()方法使用一个HTTP POST 请求从服务器加载数据

jQuery.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

  相当于一个 Ajax 函数的简写形式

$.ajax({ type: "POST", url: url, data: data, success: success, dataType: dataType });

1234测试 $((){ $.post(,{ num: $().val() },function(data){ $( data) }) }) php $num = $_REQUEST[‘num‘]; if($num % 2 == 0){ echo ‘偶数‘; }else{ echo ‘奇数‘; } ?>

  post()方法和get()方法的结构和使用方式都相同。但要注意的是,当load()方法带有数据参数传递时,会使用POST方式发送请求

 

序列化

  当一个表单中字段较多,表单元素较复杂时,就需要一种方法来简化提取表单内部控件的值的操作,这一行为通常叫序列化,jQuery提供了param()、serialize()和serialzeArray()这三个方法

【param()】

  param(obj)方法用来创建一个数组或对象序列化的字符串,适用于一个URL地址查询字符串或Ajax请求

console.log($.param({ width:1680, height:1050 }));//‘width=1680&height=1050‘

【serialize()】

  serialize()方法将用作提交的表单元素的值编译成字符串

  [注意]serialize()方法的一个额外好处是会自动对键值对儿中的特殊字符进行编码

SingleSingle2MultipleMultiple2Multiple3check1check2radio1radio2 showValues() { $().serialize()); } $().click(showValues); $().change(showValues); showValues();

【serializeArray()】

  serializeArray()方法将用作提交的表单元素的值编译成拥有name和value对象组成的数组,即json格式的数据。例如[ { name: a value: 1 }, { name: b value: 2 },...]

4567 $(() { console.log($(this).serializeArray()); return false; });

  结果如下 

[ { name: "a", value: "1" }, { name: "b", value: "2" }, { name: "c", value: "3" }, { name: "d", value: "4" }, { name: "e", value: "5" } ]

  该对象可以使用each()函数对数据进行迭代输出

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • SpringMvc的ajax

    SpringMvc的ajax

    2017-03-29 12:01

  • 为什么说setTimeout和ajax原理是一样的?

    为什么说setTimeout和ajax原理是一样的?

    2017-03-29 09:00

  • jQuery Ajax,jqueryajax

    jQuery Ajax,jqueryajax

    2017-03-29 08:01

  • struts2 https ajax案例

    struts2 https ajax案例

    2017-03-29 08:00

网友点评
<