GVKun编程网logo

几种常用的ajax配合json数据格式向后台发送请求以及后台如何接收数据

7

针对几种常用的ajax配合json数据格式向后台发送请求以及后台如何接收数据这个问题，本篇文章进行了详细的解答，同时本文还将给你拓展Ajax接收后台发送过来的布尔值以及指定的字符串、AJAX——JSO

针对几种常用的ajax配合json数据格式向后台发送请求以及后台如何接收数据这个问题，本篇文章进行了详细的解答，同时本文还将给你拓展Ajax 接收后台发送过来的布尔值以及指定的字符串、AJAX——JSON数据格式、Ajax使用JSON数据格式、ajax使用json数组------前端往后台发送json数组及后台往前端发送json数组等相关知识，希望可以帮助到你。

本文目录一览：

几种常用的ajax配合json数据格式向后台发送请求以及后台如何接收数据

几种常用的ajax配合json数据格式向后台发送请求以及后台如何接收数据

一、$.ajax()（无刷新）

  • jsonp格式：以url形式传递拼接数据：http://192.168.1.1/pwc/esb?gn=tx&cz=list&id=1&shzt=5
	var param = {id:$("#cxsq_xk_id").val(),shzt:$('input[name="cxsq_sfcd"]:checked').val()}
	$.ajax({
		type: "POST",//请求方式 post
		dataType : 'jsonp',//数据类型 jsonp
        	jsonp:"jsoncallback",//回调类型 jsonp
		contentType:"application/x-www-form-urlencoded; charset=utf-8",//请求内容类型（键值对，编码格式utf-8）
		url: "/esb?gn=ts&cz=check",// 请求地址
		data: param,//请求附带参数
		timeout:20000,//请求超时时间（20秒）
		error:function(XMLHttpRequest,textStatus,errorThrown){ //请求错误捕捉
			alert("连接服务器失败,请重试!");
		},success: function(responseData){ //请求成功捕捉
			$("#modal_cxsq").modal('hide');
			InitData(cur_page);
			$("#btn_modal_ts_tj").attr("disabled",false);
		}
			
	});
后台接受数据方式：String str = request.getParameter("id");或者Object obj = request.getAttribute("id");
  • 以jsonp格式传递数据
js部分： 
	var data='{"update":[{';
		data+='"id":'+id;
		data+=',"shuLiang":'+num;
		data += '}]}';
	$.ajax({
		type: "POST",//数据类型 jsonp
        	jsonp:"jsoncallback",//请求内容类型（键值对，编码格式utf-8）
		url: sjzxym+"/esb?gn="+gn+"&cz="+cz,// 请求地址
		data: {rows:param},//请求附带参数（rows）
		timeout:20000,errorThrown){ //请求错误捕捉
			//alert("连接服务器失败,请重试!");
			btn!=null&&$(btn).attr("disabled",false); //元素是否存在，是否禁用
		},success: function(responseData){ //请求成功捕捉
			callback(responseData);　//回调
			btn!=null&&$(btn).attr("disabled",false); //元素是否存在，是否禁用
		}
			
	});
后台部分：
  1. 可以使用alibaba的fastjson、google的GSON、json-lib来解析json数据；以json-lib为例，导入相关jar包（
    • json-lib-2.3-jdk15.jar
    • commons-beanutils-1.8.0.jar
    • commons-collections-3.1.jar
    • commons-lang-2.4.jar
    • commons-logging-1.1.1.jar
    • ezmorph-1.0.6.jar
    ）
  2. 接收方式：(1)接收json对象：JsonObject obj = JsonObject.fromObject(request.getParameter("rows"))；（2）接收json数组：JsonArray arr = JsonArray.fromObject(request.getParameter("rows"))



二、$.getJSON（无刷新）

  • var url = "http:127.0.0.1/pwc/esb?gn="+gn+"&cz="+cz+"&jsoncallback=?";
$.getJSON(url,param,function(data){
	callback(data);
});
后台接受数据方式：String str = request.getParameter("id");或者Object obj = request.getAttribute("id");
$.ajax主要用于增删改操作,$.getJSON则应用于查询操作;

Ajax 接收后台发送过来的布尔值以及指定的字符串

Ajax 接收后台发送过来的布尔值以及指定的字符串

后台：

aContext.getResponse().getWriter().println("" + result);

前端：

$.ajax({
            url:encodeURI(encodeURI(url)),
            async :true,
            type:''post'',
            success:function(result)
            {
                if(result.indexOf("true")!=-1){//重点在这！！！
                  alert(''设置成功！'');
                }else{
                   alert(''设置失败！'');
                }
             },
                error:function(xhr)
             {
                  alert("请求失败");
             } 
        });

 

AJAX——JSON数据格式

AJAX——JSON数据格式

JSON数据格式，前段时间一直听他们合作的说，但是不知道是什么，这次终于明白了，其实就是一种类似于XML的数据传输格式。下边我从定义，语法，转换为JavaScript对象以及与XML的比较四个方面介绍一下。


一，先看一下定义吧，这是百度百科中的：

JSON(JavaScriptObject Notation) 是一种轻量级的数据交换格式。它基于JavaScript的一个子集。JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C,C++,C#,Java,JavaScript,Perl,Python等）。这些特性使JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成。


二，看一下它的语法使用规则：

首先我们来看一个例子吧，通过这个例子来学习它的各种语法规则吧：

<html>
<body>
<h2>通过 JSON 字符串来创建对象</h3>
<p>First Name: <span id="fname"></span></p> 
<p>First Name: <span id="fname2"></span></p> 

<script type="text/javascript">
//定义为employees为JSON数据格式的，里边包含了三个对象
var employees = [
{ "firstName":"Bill","lastName":"Gates" },{ "firstName":"George","lastName":"Bush" },{ "firstName":"Thomas","lastName": "Carter" }
];
employees[1].firstName="刘佳翰";
document.getElementById("fname").innerHTML=employees[0].firstName;
document.getElementById("fname2").innerHTML=employees[1].firstName;
</script>

</body>
</html>

语法一：JSON 数据的书写格式是：名称/值对。

名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值；例如上边的："firstName":"Bill"

语法二：JSON 值可以是：

数字（整数或浮点数）

字符串（在双引号中）

逻辑值（true或 false）

数组（在方括号中）

对象（在花括号中）

null

语法三：JSON对象：

JSON 对象在花括号中书写；

对象可以包含多个名称/值对；

语法四：JSON数组：

JSON 数组在方括号中书写；

数组可包含多个对象；


三，如何将JSON数据格式转换为JavaScript对象呢，我们可以利用内置函数eval().这点在例子中看：


<script type="text/javascript">
         //定义json数据格式json1和json2
    var json1 = "{'employees':[" +
    "{'firstName':'Bill','lastName':'Gates' }," +
    "{'firstName':'George','lastName':'Bush' }," +
    "{'firstName':'Thomas','lastName':'Carter' }]}";

    var json2 = "[1,2,{a:123,b:'String',c:[100,1001]}]";

    //这里为什么用("(" + json1 +")")，eval本身的问题。 由于json是以”{}”的方式来开始以及结束的，
    //在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。

    var obj = eval("(" + json1 +")");
    var jsonArray = eval(json2);
    document.getElementById("fname").innerHTML = obj.employees[1].firstName
    document.getElementById("lname").innerHTML = obj.employees[1].lastName
    alert(jsonArray[1]);
</script>

当然这是我们方便学习在前台写的JSON数据格式，直接调用的，而在实际应用中，我们更多是将后台传输的格式写成JSON的，然后传到前台，再进行各种处理使用。

四，JSON数据格式和XML的比较：

先看一下两个例子吧：

XML表示如下：

<?xml version="1.0" encoding="utf-8"?>
<country>
<name>中国</name>
<province>
<name>黑龙江</name>
<cities>
<city>哈尔滨</city>
<city>大庆</city>
</cities>
</province>
<province>
<name>广东</name>
<cities>
<city>广州</city>
<city>深圳</city>
<city>珠海</city>
</cities>
</province>
<province>
<name>台湾</name>
<cities>
<city>台北</city>
<city>高雄</city>
</cities>
</province>
<province>
<name>新疆</name>
<cities>
<city>乌鲁木齐</city>
</cities>
</province>
</country>

JSON表示如下：

{
"name":"中国","province":[
{
"name":"黑龙江","cities":{
"city":["哈尔滨","大庆"]
}
},{
"name":"广东","cities":{
"city":["广州","深圳","珠海"]
}
},{
"name":"台湾","cities":{
"city":["台北","高雄"]
}
},{
"name":"新疆","cities":{
"city":["乌鲁木齐"]
}
}
]
}

两者相同之处：

  • 都是纯文本
  • 具有“自我描述性”（人类可读）
  • 具有层级结构（值中存在值）
  • 可通过 JavaScript 进行解析
  • 可使用 AJAX 进行传输

两者不同之处：

  • JSON没有结束标签
  • 更短
  • 读写的速度更快
  • 能够使用内建的 JavaScript eval() 方法进行解析
  • 使用数组
  • 不使用保留字

AJAX传输异步数据为什么使用JSON呢？

对于 AJAX应用程序来说，JSON比 XML更快更易使用：

使用 XML

  • 读取 XML文档
  • 使用 XML DOM来循环遍历文档
  • 读取值并存储在变量中

JSON

  • JSON字符串
  • 用 eval()处理字符串

这样就能看出我们利用JSON传输数据的快捷了。


综上为JSON的基础学习，虽然知识点不大，但是还是非常重要的知识，学习好JSON，可以更方便更快捷的为我们的AJAX传输异步数据进行。AJAX的学习中……

Ajax使用JSON数据格式

Ajax使用JSON数据格式

1：
•JSON（JavaScriptObject Notation）一种简单的数据格式，比xml更轻巧。JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。
•JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。
•JSON用冒号(而不是等号)来赋值。每一条赋值语句用逗号分开。整个对象用大括号封装起来。可用大括号分级嵌套数据。
•对象描述中存储的数据可以是字符串，数字或者布尔值。对象描述也可存储函数，那就是对象的方法。 

<span>{"person": {
  "name":"Andy Budd","website":"http://andybudd.com/","email":"andy@clearleft.com"
  }
}</span>
•JSON 只是一种文本字符串。它被存储在responseText 属性中
•为了读取存储在 responseText 属性中的JSON 数据，需要根据JavaScript 的eval语句。函数 eval会把一个字符串当作它的参数。然后这个字符串会被当作 JavaScript 代码来执行。因为 JSON 的字符串就是由 JavaScript 代码构成的，所以它本身是可执行的
2：案例： 
<%@ page language="java" pageEncoding="UTF-8"%>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<Meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>People at Clearleft</title>
		<style type="text/css">
@import url("clearleft.css");
</style>
		<script type="text/javascript">
  window.onload=function(){  
       var aNodes=document.getElementsByTagName("a");  
          
       for(var i = 0;i < aNodes.length; i++){  
            
          aNodes[i].onclick=function(){  
             var request=new XMLHttpRequest();  
             var url=this.href;  
              var method="GET";  
              request.open(method,url);   
               request.send(null);  
               request.onreadystatechange=function(){  
                 if(request.readyState==4){  
                   if(request.status==200||request==304){  
                     var result=request.responseText;  //json被存储在responseText属性中
                     var object=eval("("+result+")");  //读取responseText中的json数据
                     var name= object.person.name;     //读取json对象中存储的数据
                     var website= object.person.website;
                     var email= object.person.email;
                     var aNode=document.createElement("a");
                     aNode.appendChild(document.createTextNode(name+":"+"email"+":"+website));
                     aNode.href="mailTo"+"email"+",website";
                     var h2Node=document.createElement("h2");
                     h2Node.appendChild(aNode);
                     var dtails=document.getElementById("details");
                     details.innerHTML="";  //防止重复的添加字符串
                     dtails.appendChild(h2Node);
                   }  
                 }  
              }  
             return false;     
          }  
      }    
    };  
  </script>
	</head>
	<body>
		<h1>
			People
		</h1>
		<ul>
			<li>
				<a href="files/andy.js">Andy</a>
			</li>
			<li>
				<a href="files/richard.js">Richard</a>
			</li>
			<li>
				<a href="files/jeremy.js">Jeremy</a>
			</li>
		</ul>
		<div id="details"></div>
	</body>
</html>

ajax使用json数组------前端往后台发送json数组及后台往前端发送json数组

ajax使用json数组------前端往后台发送json数组及后台往前端发送json数组

 

1.引子

        Json是跨语言数据交流的中间语言，它以键/值对的方式表示数据，这种简单明了的数据类型能被大部分编程语言理解。它也因此是前后端数据交流的主要方式和基础。

2.前端往后台传输json数据

        第一步，先应该定义一个JSON对象或JSON数组。json对象是“var jsonObj={“name1”:“value1” , “name2”:“value2” , “name3”:“value3”,…};”的格式定义,而json数组则是以中括号"[ ]"包裹多个json对象的格式定义，如 " var jsonArray= [ {‘name1’:‘value1’, ‘name2’:‘value2’ , …} ,{ ‘_name1’ : ‘_value1’ , ‘_name2’ : ‘_value2’, … } , … ] " 。

<script type="text/javascript">
    <!--定义JSON数组-->
    var jsonArr = [ {
        "empNo" : "1242",
        "deptName" : "销售部",
        "password" : "24284",
        "hobbys" : "跳舞 上网",
        "empName" : "小五",
        "sex" : "男",
        "infor" : "好学生"
    }, {
        "empNo" : "1254",
        "deptName" : "技术部",
        "password" : "24224",
        "hobbys" : "跳舞  唱歌",
        "empName" : "小明",
        "sex" : "女",
        "infor" : "一个漂亮的女孩"
    } ];


</script>

 

        第二步定义ajax方法。ajax方法中的data参数要注意写法，不能直接以键值对的方法设置，要用大括号{}包裹起来的键/值对方式定义，并且用JSON.stringify()方法将json对象转为字符串形式。如果不使用"JSON.stringify()"方法，后台的java代码将不能获得json对象。

<a href="javascript:sendJson()">发送Json数据</a>

<script type="text/javascript">
    <!--发送json数据到servlet处理 -->
    function sendJson() {
        $.ajax({
            type : "POST",
            url : "http://localhost:8080/jspdemo/servlet/EmployeeServlet?action=getJsonObj",
            data : {
                ''jsonObj'' : JSON.stringify(jsonArr) //将原始json对象转为String
            },
            success : function(msg, status) {
                alert("请求提交后得到了成功的响应");
            }
        });
    }
    </script>

 

        servlet类中定义的方法，用阿里巴巴的fastjson工具包中JSONArray.parseArray(String text, Class clazz)方法，将键值对方式排列的字符串形式的json数组解析为java数组对象。

public void getJsonObj(HttpServletRequest request, HttpServletResponse response)
    {
        String empStr = request.getParameter("jsonObj");
        System.out.println("empjson字符串" + empStr);
       List< Employee> emps = JSONArray.parseArray(empStr,Employee.class);
       System.out.println("json传到后台的Employee数据:" );
       for(Employee emp: emps){
          System.out.println(emp);
           
       }
    }

 

　　

                控制台输出

 

3.后台往前端传输json数据

        第一步，先在servlet中定义方法，用阿里巴巴的fastjson工具包中JSONArray.toJSON(Object javaObject).toString() 将java对象转化为json数据形式的字符串。将此字符串用PrintWriter的print()方法发送到前端

public void getEmpList(HttpServletRequest request, HttpServletResponse response)
    {
        List<Employee> empList = generateEmployeeList();
        for(Employee emp: empList){
            System.out.println(emp);
         }
        try
        {
            //转为json数据形式的字符串
response.getWriter().print(JSONArray.toJSON(empList).toString());
        }
        catch (IOException e)
        {
            e.printStackTrace();
        }
    }

 

        第二步，用ajax方法请求后台的servlet的相应方法。在设置ajax的可选参数"dataType"应当设置为"json",这样显式地声明返回数据类型是json格式，可以直接用其下标取出其中的元素。如果省略此参数，“dataType"默认是"text”，则需要先用函数 eval("("+data+")")将其转化为json格式，然后再循环遍历json数组其中的元素 。

<script type="text/javascript">
<!-- ajax显示全部 方法-->
    function ajaxQueryAll() {
        $.ajax({
            type : "POST",
            url : "http://localhost:8080/jspdemo/servlet/EmployeeServlet?action=getEmpList",
            /* dataType参数若没写，需要先用函数"var $result=eval(''(''+data+'')'');"转化为json格式 ,
            再遍历 $result中的元素 */
            dataType : "json",
            success : function(data) {
                var $tbody = $("#table-main");
                var $data = $(data);
                /* 以下标遍历 */
                    /* for (var i = 0; i < data.length; i++) {
                        $tbody.append("<tr >");
                        $tbody.append("<td>" + data[i].empNo + "</td>");
                        $tbody.append("<td>" + data[i].empName + "</td>");
                        $tbody.append("<td>" + data[i].sex + "</td>");
                        $tbody.append("<td>" + data[i].deptName + "</td>");
                        $tbody.append("<td>" + data[i].hobbys + "</td>");
                        $tbody.append("<td>" + data[i].infor + "</td>");
                        $tbody.append("</tr >");
                    }
                     */
        /*forEach循环遍历  */
                $data.each(
                    function() {
                        $tbody.append("<tr >");
                        $tbody.append("<td>" + this.empNo + "</td>");
                        $tbody.append("<td>" + this.empName + "</td>");
                        $tbody.append("<td>" + this.sex + "</td>");
                        $tbody.append("<td>" + this.deptName + "</td>");
                        $tbody.append("<td>" + this.hobbys + "</td>");
                        $tbody.append("<td>" + this.infor + "</td>");
                        $tbody.append("</tr >");
                    }
                );
            }
        });
    }
    </script>
    
    <input type="button" onClick="ajaxQueryAll()" value="ajax查询所有" />
    <table width="400px" align="center" border="1px"
        style="background-color:orange;">
        <thead>
            <tr>
                <th>员工编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>部门</th>
                <th>爱好</th>
                <th>附加信息</th>
            </tr>
        </thead>
        <tbody id="table-main">
        </tbody>
    </table>

 

                控制台输出

 


                前端页面显示

 

 

 

 

今天关于几种常用的ajax配合json数据格式向后台发送请求以及后台如何接收数据的介绍到此结束，谢谢您的阅读，有关Ajax 接收后台发送过来的布尔值以及指定的字符串、AJAX——JSON数据格式、Ajax使用JSON数据格式、ajax使用json数组------前端往后台发送json数组及后台往前端发送json数组等更多相关知识的信息可以在本站进行查询。

本文标签：

上一篇Mockjs+Ajax实践（mockjs react）

下一篇如何在Symfony 2.0 AJAX应用程序中将Doctrine实体编码为JSON？（ajax指定编码）

相关文章