js333 > 计算机互联网 > 通过构造AJAX参数实现表单元素JSON相互转换

原标题:通过构造AJAX参数实现表单元素JSON相互转换

浏览次数:97 时间:2019-11-19

通过构造AJAX参数实现表单元素JSON相互转换,ajaxjson

ajax提交服务器数据, 整理一下转换方法。

HTML:

<form id="fm" name="fm" action="">
<input name="UserName" type="text" value="UserName1"/>
</form>
<input name="UserId" id="UserId" type="text" value="UserId1"/> 

1.表单元素转QueryString

var q = $('#fm,#UserId').serialize(); //q = UserName=UserName1&UserId=UserId1 

2.字符串, JSON 互相转换

var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" ); 

可以利用jquery-json插件实现转换,直接引用示例

var thing = {plugin: 'jquery-json', version: 2.3};
var encoded = $.toJSON( thing );
// '{"plugin":"jquery-json","version":2.3}'
var name = $.evalJSON( encoded ).plugin;
// "jquery-json"
var version = $.evalJSON(encoded).version;
// 2.3 

3.表单,元素转Name,Value数组

var arr = $("#fm,#UserId").serializeArray();
/*[ 
{name: 'UserName', value: '"UserName"1'}, 
{name: 'UserId', value: 'UserId'}
] */ 

4. 表单元素转JSON

$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
var obj = $('form').serializeObject();
/*obj: Object
UserId: "UserId1"
UserName: "UserName1"
__proto__: Object*/ 

5. JSON2FORM

$.getJSON('url_to_file', function(data) {
for (var i in data) {
$('input[name="'+i+'"]').val(data[i]);
}
}

Google过程中发现一个更强大的插件

data = {
"Name":"Emkay Entertainments",
"Address":"Nobel House, Regent Centre",
"Contact":"Phone"
} 
$('div#data').loadJSON(data);
<div id="data">
<h1 id="Name">Emkay Entertainments</h1>
<label for="Address">Address:</label>
Nobel House, Regent Centre 
<label for="Contact">Contact by:</label>
Phone
</div> 

ajax提交服务器数据, 整理一下转换方法。 HTML: form id="fm" name="fm" action=""input name="Use...

ajax提交服务器数据, 整理一下转换方法。

四、Ajax的XML

Ajax的XML

1.请求的数据格式-XML

  • 客户端如何构建XML格式的数据

  • 构建的数据类型 - 字符串类型

  • 字符串的内容要符合XML格式的语法要求

  • 服务器端如何接受符合XML格式的数据
    接收到的客户端的请求数据 - 字符串类型,php集成了DOM的相关内容

    DOMDocument
    DOMElement
    DOMNode
    

    2.响应的数据格式-XML

  • 服务器端如何构建符合XML格式的数据

  • 设置服务器端的响应头Content-Type值为text/xml
    header("Content-Type:text/xml");

  • 构建符合XML格式的数据内容
    DOMDocument对象的方法
    loadXML(符合XML格式的字符串)
    saveXML()方式进行响应

  • 客户端如何接受XML格式的数据

  • 使用XMLHttpRequest对象的responseXML属性接收

  • 接收到的就是XML DOM对象(不需要进行解析)

HTML:

1.请求的数据格式-XML

json

1.JSON - javascript object notation(JS原生支持)
2.json数据格式源于js
3.特点:

  • 易于程序员阅读和编写
  • 易于计算机解析和生成
  • json是目前网络上使用最广泛的数据格式之一
  • Array和Object
  • 支持的数据类型
  • 字符串、数值、布尔值、对象、数组、null
<form id="fm" name="fm" action="">
<input name="UserName" type="text" value="UserName1"/>
</form>
<input name="UserId" id="UserId" type="text" value="UserId1"/> 
  1)客户端如何构建XML格式的数据

    构建的数据类型 - 字符串类型
    字符串的内容要符合XML格式的语法要求

  2)服务器端如何接受符合XML格式的数据

     接收到的客户端的请求数据 - 字符串类型,php集成了DOM的相关内容

       DOMDocument
       DOMElement
       DOMNode

ajax中的json格式

1.请求格式为json

  • 客户端向服务器端发送请求为json格式的数据

  • 构建符合JSON格式的字符串

  • 定义字符串时,保证里面使用双引号,外面使用单引号

  • 服务器端接受json格式的数据

  • 使用json_decode()函数进行解析

  • json_decode($json,true);ture代表是否转换为数组

2.响应格式为json

  • 服务器端向客户发送响应为json格式的数据
  • 手工方式构建json格式的字符串
  • 使用json_encode()函数将php变量(数组),转换成复合json格式的字符串
  • 客户端接受json格式的数据
  • 使用XMLHttpRequest对象的responseText属性接受
  • 然后使用eval函数进行转换,如果使用()包裹,eval函数强制转换为js代码,
    var json = eval("("+data+")");

1.表单元素转QueryString

2.响应的数据格式-XML

HTML(文本)、XML格式、JSON格式的优缺点

  • HTML: 简单,但解析复杂
  • XML: 构建、解析复杂
  • JSON: 轻量级
var q = $('#fm,#UserId').serialize(); //q = UserName=UserName1&UserId=UserId1 
  1)服务器端如何构建符合XML格式的数据

    设置服务器端的响应头Content-Type值为text/xml

      header("Content-Type:text/xml");

    构建符合XML格式的数据内容

       手动方式构建字符串内容

       DOMDocument对象的方法
         loadXML(符合XML格式的字符串)
         saveXML()方式进行响应

  2)客户端如何接受XML格式的数据

      使用XMLHttpRequest对象的responseXML属性接收

      接收到的就是XML DOM对象(不需要进行解析)

练习:二级联动(服务器端响应的格式为xml)

jQuery中的ajax

1.封装第一层 - 类似于原生ajax的用法

$ajax:
var data = {
  name:"jj",
  site:1
}
$.ajax({
  url:"myPhp04.php",
  type:"post",
  data:data,
  success:function(data,textStatus){
    console.log(textStatus);
    console.log(data);
  },
  error:function(){
  },
  dataType:"json",
})

2.封装第二层 - 基于第一层再次封装

  $().load(); 
  $.post();

3.封装的第三层 - 特殊用法

  $.getScript(); - 动态读取脚本(js代码)
  $.getJson();  - 接收json格式数据

2.字符串, JSON 互相转换

五、json

load(url,data,callback)方法

1.最简单、局限性最大

  • url - 设置ajax的请求地址
  • data - 设置ajax的请求数据
    要求为key:value格式,其实就是js的对象格式
  • callback: ajax请求成功后的回调函数
    回调函数的参数就是服务器返回的数据

2.服务器响应的数据自动写入调用load方法的属性中
3.load()方法的请求类型

  • 没有请求数据时,请求类型是GET
  • 发送请求数据时,请求类型是POST

4.load()方法接受服务器端的响应数据
是以字符串类型(HTML格式)来接受

var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" ); 
  1. JSON - javascript object notation(JS原生支持)
  2. json数据格式源于j
  3. 特点:
    易于程序员阅读和编写
    易于计算机解析和生成
    json是目前网络上使用最广泛的数据格式之一
  4. JSON的结构
    Array和Object
    支持的数据类型
    字符串、数值、布尔值、对象、数组、null

get/post()方法

1.get(url,data,callback,type)

  • 参数
  • url - 设置ajax的请求地址
  • data - 设置ajax的请求数据
    要求为key:value格式,其实就是js的对象格式
  • callback: ajax请求成功后的回调函数
    回调函数的参数就是服务器返回的数据
  • type:设置服务器端响应的数据格式
    默认值为HTML,还可以为xml/json
  • 无论是否发送请求数据,请求类型都是GET
  • $.get()方法可以接受HTML/XML/JSON格式

2.post(url,data,callback,type)
使用方式跟get一模一样

可以利用jquery-json插件实现转换,直接引用示例

六、ajax中的json格式

$.ajax(options)方法

1.options的格式是{key:value}
2.url:请求地址

  1. type:请求类型,默认为get

  2. async:是否异步,默认为true
    5.contentType POST方式发送数据的前提
    默认值为application/x-www-form-urlencoded
    6.data:请求数据,格式必须为key=value
    7.success:请求成功后的回调函数

     function(data,textStatus)
       data - 服务器响应的内容
       textStatus - 表示ajax请求的状态,此时的值为success
    

8.error:请求失败后的回调函数

    function(XMLHttpRequest,textStatus,errorThrown)
      XMLHttpRequest - ajax的核心对象
      errorThrown - 错误异常信息
      textStatus - 表示ajax请求的状态
      error/timeout/notmodified

9.dataType:数据响应格式
HTML/XML/JSON

var thing = {plugin: 'jquery-json', version: 2.3};
var encoded = $.toJSON( thing );
// '{"plugin":"jquery-json","version":2.3}'
var name = $.evalJSON( encoded ).plugin;
// "jquery-json"
var version = $.evalJSON(encoded).version;
// 2.3 
  1. 请求格式为json
    客户端向服务器端发送请求为json格式的数据
    构建符合JSON格式的字符串
    定义字符串时,保证里面使用双引号,外面使用单引号
    服务器端接受json格式的数据
    使用json_decode()函数进行解析
    json_decode($json,true);ture代表是否转换为数组

  2. 响应格式为json

    服务器端向客户发送响应为json格式的数据
    手工方式构建json格式的字符串
    使用json_encode()函数将php变量(数组),转换成复合json格式的字符串
    客户端接受json格式的数据
    使用XMLHttpRequest对象的responseText属性接受
    然后使用eval函数进行转换,如果使用()包裹,eval函数强制转换为js代码,
    var json = eval("("+data+")");

使用$.getScript(url,calback)动态读取脚本

1.若JS代码过多时,会影响HTML页面加载的速度,如果已被加载的JS代码并不是立即执行,只加载马上执行的js代码,会提交效率
2.参数

  • url - 读取脚本的地址(本地或服务器)
  • calback - 回调函数

3.表单,元素转Name,Value数组

七、 HTML(文本)、XML格式、JSON格式的优缺点

表单的Ajax异步提交 -

1.表单的序列化

  • serialize() 返回的是json字符串
    使用表单元素的name属性值
    {key:value}

  • serializeArray() 返回的是json对象
    json对象由一个对象数组组成
    [obj1,obj2,obj3,...]

  • 注意:
    表单必须要有name属性

  1. jQuery.form插件
  • 实现表单的异步提交,底层机制,还是使用正常的表单提交机制

  • 两个核心方法 - 参数既是一个option参数

  • ajaxForm(options)方法
    ajaxForm()不能提交表单。在document的ready函数中,使用ajaxForm来为 AJAX提交表单进行准备。提交动作必须由submit开始

  • ajaxSubmit(option)方法
    ajaxSubmit()马上由AJAX来提交表单。你可以在任何情况下进行该项提交。

  • 参数

  • target 服务器返回内容所存放的元素ID

  • beforeSubmit 提交前回调函数,如果返回false,则不提交

  • success 提交后的回调函数,一般有两个参数responseText,statusText

  • url 默认是form的action,如果声明,则覆盖

  • type 默认是form的method,如果声明,则覆盖

  • dataType html(默认),xml,script,json….接受服务端返回的类型

  • clearForm 布尔值,成功提交后,是否清除所有表单元素值

  • resetForm 布尔值,成功提交后,是否重置所有表单元素值

  • timeout 限制请求时间,大于该时间后则跳出请求
    http://www.cnblogs.com/popzhou/p/4338040.html

3.表单异步提交的方式

  • 不使用submit按钮,而是使用button按钮,通过绑定click事件,实现提交
  • 表单的序列化
  • 表单的异步提交
  • (常用)依旧使用submit事件,在form元素中绑定onsubmit事件,在onsubmit事件的处理函数中要做如下事情
  • 表单的序列化
  • 表单的异步提交
  • 组织表单的默认行为
var arr = $("#fm,#UserId").serializeArray();
/*[ 
{name: 'UserName', value: '"UserName"1'}, 
{name: 'UserId', value: 'UserId'}
] */ 
    HTML: 简单,但解析复杂
    XML:  构建、解析复杂
    JSON: 轻量级

getJson()方法 - 可以实现跨域提交

1.什么叫做跨域

  • 跨域:完全跨域 - IP不同

  • 域名:

  • 顶级域名 - http://www.baidu.com

  • 二级域名 - http://www.baidu.com/kongjian

  • 万维网协议:

  • 默认是不允许跨域请求的

  • 服务器那边返回的是一个函数字符串

      $.getJson("url?callback=?",function(data){
     })
    

4. 表单元素转JSON

一、jQuery中的ajax

$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
var obj = $('form').serializeObject();
/*obj: Object
UserId: "UserId1"
UserName: "UserName1"
__proto__: Object*/ 
  1. 封装第一层 - 类似于原生ajax的用法

    $ajax

  2. 封装第二层 - 基于第一层再次封装

    $().load(); 
    $.post();
    $.get();
    
  3. 封装的第三层 - 特殊用法

    $.getScript(); - 动态读取脚本(js代码)
    $.getJson();  - 接收json格式数据
    

5. JSON2FORM

二、load(url,data,callback)方法

$.getJSON('url_to_file', function(data) {
for (var i in data) {
$('input[name="'+i+'"]').val(data[i]);
}
}
 1. 最简单、局限性最大

     url - 设置ajax的请求地址

     data - 设置ajax的请求数据
        要求为key:value格式,其实就是js的对象格式

     callback: ajax请求成功后的回调函数
        回调函数的参数就是服务器返回的数据

 2. 服务器响应的数据自动写入调用load方法的属性中

 3. load()方法的请求类型

    1)没有请求数据时,请求类型是GET
    2) 发送请求数据时,请求类型是POST

 4. load()方法接受服务器端的响应数据
    是以字符串类型(HTML格式)来接受

Google过程中发现一个更强大的插件

三、get/post()方法

data = {
"Name":"Emkay Entertainments",
"Address":"Nobel House, Regent Centre",
"Contact":"Phone"
} 
$('div#data').loadJSON(data);
<div id="data">
<h1 id="Name">Emkay Entertainments</h1>
<label for="Address">Address:</label>
Nobel House, Regent Centre 
<label for="Contact">Contact by:</label>
Phone
</div> 
  1. get(url,data,callback,type)

    1. 参数
    url - 设置ajax的请求地址
    data - 设置ajax的请求数
       要求为key:value格式,其实就是js的对象格式
    callback: ajax请求成功后的回调函数
       回调函数的参数就是服务器返回的数据
    type:设置服务器端响应的数据格式
       默认为HTML,还可以为xml/json
    
    1. 无论是否发送请求数据,请求类型都是GET

    2. $.get()方法可以接受HTML/XML/JSON格式

  2. post(url,data,callback,type)

    使用方式跟get一模一样

您可能感兴趣的文章:

  • JS简单循环遍历json数组的方法
  • 金沙js333娱乐场,js实现将json数组显示前台table中
  • JS实现给json数组动态赋值的方法示例
  • js 获取json数组里面数组的长度实例
  • 用javascript对一个json数组深度赋值示例
  • js对象转json数组的简单实现案例
  • JS实现的JSON数组去重算法示例
  • JS实现键值对遍历json数组功能示例
  • JavaScript实现构造json数组的方法分析

四、$.ajax(options)方法

  1. options的格式是{key:value}

  2. url:请求地址

  3. type:请求类型,默认为get

  4. async:是否异步,默认为true

  5. contentType POST方式发送数据的前提

    默认值为application/x-www-form-urlencoded

  6. data:请求数据,格式必须为key=value

  7. success:请求成功后的回调函数

    function(data,textStatus)

    data - 服务器响应的内容

    textStatus - 表示ajax请求的状态,此时的值为success

  8. error:请求失败后的回调函数

    function(XMLHttpRequest,textStatus,errorThrown)

    XMLHttpRequest - ajax的核心对象

    errorThrown - 错误异常信息

    textStatus - 表示ajax请求的状态

     error/timeout/notmodified
    
  9. dataType:数据响应格式

    HTML/XML/JSON

五、使用$.getScript(url,calback)动态读取脚本

  1. 若JS代码过多时,会影响HTML页面加载的速度,如果已被加载的JS代码并不是立即执行,只加载马上执行的js代码,会提交效率

  2. 参数

    url - 读取脚本的地址(本地或服务器)
    calback - 回调函数

六、表单的Ajax异步提交 -

  1. 表单的序列化

    1)serialize() 返回的是json字符串

    使用表单元素的name属性值
    {key:value}

    2)serializeArray() 返回的是json对象

    json对象由一个对象数组组成
    [obj1,obj2,obj3,...]

    注意:

    表单必须要有name属性

  2. jQuery.form插件

    1)实现表单的异步提交,底层机制,还是使用正常的表单提交机制

    2)两个核心方法 - 参数既是一个option参数
    ajaxForm(options)方法

       ajaxForm()不能提交表单。在document的ready函数中,使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始 
    
    ajaxSubmit(option)方法
    
        ajaxSubmit()马上由AJAX来提交表单。你可以在任何情况下进行该项提交。 
    
    1. 参数

      target  服务器返回内容所存放的元素ID
      
      beforeSubmit  提交前回调函数,如果返回false,则不提交
      
      success 提交后的回调函数,一般有两个参数responseText,statusText
      
      url 默认是form的action,如果声明,则覆盖
      
      type  默认是form的method,如果声明,则覆盖
      
      dataType  html(默认),xml,script,json….接受服务端返回的类型
      
      clearForm 布尔值,成功提交后,是否清除所有表单元素值
      
      resetForm 布尔值,成功提交后,是否重置所有表单元素值
      
      timeout 限制请求时间,大于该时间后则跳出请求
      

      http://www.cnblogs.com/popzhou/p/4338040.html

  3. 表单异步提交的方式

    1)不使用submit按钮,而是使用button按钮,通过绑定click事件,实现提交

    表单的序列化
    表单的异步提交
    
    1. (常用)依旧使用submit事件,在form元素中绑定onsubmit事件,在onsubmit事件的处理函数中要做如下事情

      表单的序列化
      表单的异步提交
      组织表单的默认行为

    3

七、getJson()方法 - 可以实现跨域提交

  1. 什么叫做跨域
 跨域:

    完全跨域 - IP不同
    跨子域 - IP相同,但端口号不同

 域名:

    顶级域名 - http://www.baidu.com

    二级域名 - http://www.baidu.com/kongjian

 万维网协议:

     默认是不允许跨域请求的

  服务器那边返回的是一个函数字符串
  $.getJson("url?callback=?",function(data)  })

http://music.163.com/#/song?id=444269913

本文由js333发布于计算机互联网,转载请注明出处:通过构造AJAX参数实现表单元素JSON相互转换

关键词:

上一篇:金沙js333娱乐场:操作数组的常用方法,仿照jQ

下一篇:没有了