jQuery操作Ajax和Json
- 格式:doc
- 大小:72.50 KB
- 文档页数:3
在上一篇博文中已经学习了如何整合mybatis和spring,实现持久层的CRUD操作、业务层的事务管理和spring的IoC。
现在我们这个demo的基础上,继续整合struts2,并利用json插件和jquery实现ajax,完成后系统将实现登录与注册的简单功能。
浏览器端如何简单、高效地与服务器端进行数据交互是web开发者最为关心的内容。
在客户端构造intput表单数据或者拼凑URL参数名称/参数值,然后在服务器端笨拙地用request.getParameter(“参数名称”)获取参数显然已经过时了,在struts2中,只要在action 里定义了input表单名称/URL参数名称对应的String类型属性,并设置getter和setter 方法,struts2在调用action的时候就可以根据参数值自动帮你设置好action中对应的属性值供你使用,这极大地方便了开发者。
但是json更为强大——它可以根据浏览器端上传的符合格式的数据设置action中对象的值,也就是说,struts2自动封装的数据只有一层,而json是无限层。
json给页面参数的传递带来极大的方便,结合jquery来使用,可以轻易地做到页面局部刷新、页面无跳转进行友好的系统异常提示等,其中后者是我觉得最有必要做到的一点,在action中定义一个message变量,把action方法执行的结果或者系统异常信息放到里面以json的方式返回给客户端,客户端根据这个变量的结果来进行下一步的操作或者提示系统异常信息,非常地好用。
json由javascript中的对象和数组构成,基本形式是{key:value},key为属性名称,value 为属性值,value可以为数字、字符串、数组、对象,value可以为数组和对象是json可以封装无限层数据的关键所在。
至于如何建构和解析json不是本篇博文的详细表述范围,请参考其他资料。
现在就让我们利用struts2作为MVC框架,整合json插件,在浏览器端使用jquery解析和系列化json数据,由此制作一个具有登陆/注册功能的小demo。
jq ajax 写法在使用jQuery 的Ajax 功能发送异步请求时,可以使用$.ajax() 方法。
以下是一个常见的jQuery Ajax 的写法示例:javascriptCopy Code$.ajax({url: 'your-url', // 请求的URLmethod: 'POST', // 请求方法,可以是GET、POST等data: { key1: 'value1', key2: 'value2' }, // 请求参数dataType: 'json', // 服务器返回的数据类型,这里设置为JSONsuccess: function(response) {// 请求成功时的回调函数console.log(response); // 输出服务器返回的数据},error: function(xhr, status, error) {// 请求失败时的回调函数console.log(error); // 输出错误信息}});在上述代码中,使用$.ajax() 方法发送一个POST 请求到指定的URL,并传递一些参数。
url 属性指定请求的URL,method 属性指定请求的方法(如GET 或POST),data 属性指定请求的参数。
dataType 属性指定了服务器返回的数据类型,这里设置为JSON。
success 属性指定了请求成功时的回调函数,当服务器成功返回数据时,该函数会被调用。
在示例中,我们将返回的数据打印到控制台。
error 属性指定了请求失败时的回调函数,当请求发生错误时,该函数会被调用。
在示例中,我们将错误信息打印到控制台。
你可以根据自己的需求修改示例代码中的URL、请求方法、参数和回调函数,以及处理返回数据的逻辑。
1.ajax传输用字符串,后台接收参数用request.getParameter,所以前台必须有Parameter 如"/FirstServlet/regPage?countryId=" + countryId2.后台向前台传参数通过response,PrintWriter pw = resp.getWriter();pw.print(“df”);前台接收参数用var txt = xhr.responseText;3.如果用json字符串传输前台用jQuery.ajax是如下data : {'mydata':jsonStr},jQuery.ajax({type: "post",url: url,dataType : 'json',data : {'mydata':jsonStr},success: function(data,textStatus){alert("操作成功");},error: function(xhr,status,errMsg){alert("操作失败!");}});后台一样用request如String jsonStr = ServletActionContext.getRequest().getParameter("mydata");4.后台向前台传值一样用response如pw.print(jsonList.toString());前台接收jQuery用success: function(data,textStatus)data就是一个json(自动将json字符串转化为了json)5.json与json字符串之间的转化json的格式两种:数组["hello", 12, true , null];和对象{ "color": "red", "doors" : 4, "paidFor" : true };前台:json-json字符串JSON.stringify(jsonobj);$("#form").serialize()//表单转化为json字符串json字符串-jsoneval('(' + jsonstr + ')');JSON.parse(jsonstr);使用Function对象来进行返回解析function(data,textStatus){后台:json-json字符串jsonObj.toString()json字符串-jsonJSONObject obj1 = JSONObject.fromObject("{'dsaf':'uuuu'}");JSONObject obj = JSONObject.fromObject(address);//把对象转化为json。
通过jquery的ajax请求本地的json⽂件⽅法⾃⼰学习jquery的ajax的经历,记录⼀下ajaxTestDemo.html在body⾥⾯放⼀个id为test的div<div id="test"></div>第⼀步还是要先加载jquery⽂件 jquery.min.js<script>$(function(){$.ajax({//请求⽅式为gettype:"GET",//json⽂件位置url:"./data/shuju.json",//返回数据格式为jsondataType: "json",//请求成功完成后要执⾏的⽅法success: function(data){//使⽤$.each⽅法遍历返回的数据date,插⼊到id为#result中var str="<ul>";$.each(data.list,function(i,n){str+="<li>"+n["item"]+"</li>";})str+="</ul>";$("#test").append(str);}});});</script>shuju.json⽂件{"list":[{"item":"审计管理"},{"item":"菜单管理"},{"item":"订单管理"},{"item":"合同管理"},{"item":"物流管理"},{"item":"⾏政管理"},{"item":"⼈事管理"},{"item":"购物管理"},{"item":"批发管理"},{"item":"安全管理"},{"item":"账号管理"},{"item":"财务管理"},{"item":"其他管理"}]}/* json⽂件⾥竟然不能有这样的注释,因为困扰了⼏个⼩时!*/完整的页⾯代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>测试jquey的ajax⽅法</title><style>*{padding:0;margin:0;}#test{padding: 0;margin: 0 auto;width:200px;height: 400px;}#test li{list-style: none;width:200px;text-align: center;height:30px;line-height:30px;border:1px dashed lightgrey;}</style></head><body><div id="test"></div><script src="js/jquery.min.js"></script><script>$(function(){alert(1);$.ajax({//请求⽅式为gettype:"GET",//json⽂件位置url:"./data/shuju.json",//返回数据格式为jsondataType: "json",//请求成功完成后要执⾏的⽅法success: function(data){//使⽤$.each⽅法遍历返回的数据date,插⼊到id为#result中var str="<ul>";$.each(data.list,function(i,n){str+="<li>"+n["item"]+"</li>";})str+="</ul>";$("#test").append(str);}});});</script></body></html>还可以通过$.getJSON来获取本地json⽂件/* getJSON*/$(function(){$.getJSON("./data/shuju.json",function(data){var str="<ul>";$.each(data.list,function(i,n){str+="<li>"+n["item"]+"</li>";})str+="</ul>";$("#test").append(str);});});以上这篇通过jquery的ajax请求本地的json⽂件⽅法就是⼩编分享给⼤家的全部内容了,希望能给⼤家⼀个参考,也希望⼤家多多⽀持。
最近在使用JQuery的ajax方法时,要求返回的数据为json数据,在处理的过程中遇到下面的几个问题,那就是采用不同的方式来生成json数据的时候,在$.ajax方法中应该是如何来处理的,下面依次来进行说明,由于本人使用的是,所以处理的页面都是采用.net来做的!其他的方式应该是相同的吧首先给出要传的json数据:[{"demoData":"This Is The JSON Data"}]1,使用普通的aspx页面来处理本人觉得这种方式处理起来是最简单的了,看下面的代码吧$.ajax({type: "post",url: "Default.aspx",dataType: "json",success: function (data) {$( "input#showTime").val(data[0].demoData);},error: function (XMLHttpRequest, textStatus, errorThrown) {alert(errorThrown);}});这里是后台传递数据的代码Response.Clear();Response.Write( "[{\"demoData\":\"This Is The JSON Data\"}]");Response.Flush();Response.End();这种处理的方式将传递过来的数据直接解析为json数据,也就是说这里的前台js代码可能直接把这些数据解析成json对象数据,而并非字符串数据,如data[0].demoData,这里就直接使用了这个json对象数据2,使用webservice(asmx)来处理这种处理方式就不会将传递过来的数据当成是json对象数据,而是作为字符串来处理的,如下代码$.ajax({type: "post",url: "JqueryCSMethodForm.asmx/GetDemoData",dataType: "json", /*这句可用可不用,没有影响*/contentType: "application/json; charset=utf-8",success: function (data) {$( "input#showTime").val(eval('(' + data.d + ')')[0].demoData);//这里有两种对数据的转换方式,两处理方式的效果一样//$("input#showTime").val(eval(data.d)[0].demoData);},error: function (XMLHttpRequest, textStatus, errorThrown) {alert(errorThrown);}});下面这里为asmx的方法代码[WebMethod]public static string GetDemoData() { return"[{\"demoData\":\"This Is The JSON Data\"}]";}这里的这种处理方式就把传递回来的json数据当成了字符串来处理的,所在就要对这个数据进行eval的处理,这样才能成为真正的json对象数据,3,使用ashx文件来处理这种方式和普通的aspx的页面处理是一样的所以这里就不多做解释了!本文由淄博SEO(),淄博网站优化()整理发布,转载请注明出处。
$.ajax使用方法$.ajax是jQuery中的一个方法,用于执行异步HTTP(Ajax)请求。
以下是$.ajax的基本使用方法:1.创建请求:```javascript$.ajax({url:"example.php",//请求的URL地址type:"GET",//请求方式,GET或POST dataType:"json",//预期服务器返回的数据类型,可以是xml、json、script、html等success:function(data){//请求成功后的回调函数console.log(data);//输出服务器返回的数据},error:function(){//请求失败时的回调函数console.log("请求失败");}});```2.发送数据:```javascript$.ajax({url:"example.php",type:"POST",data:{foo:"bar"},//要发送到服务器的数据,以键值对的形式表示dataType:"json",success:function(data){console.log(data);},error:function(){console.log("请求失败");}});```3.处理服务器响应:在成功回调函数中,服务器返回的数据作为参数传递给回调函数。
可以根据需要处理这些数据,例如更新页面内容或执行其他操作。
4.配置选项:$.ajax方法接受一个配置对象作为参数,其中包含以下选项:-`url`:请求的URL地址。
-`type`:请求方式,默认为"GET"。
-`dataType`:预期服务器返回的数据类型,默认为"html"。
jQuery中ajax请求后台返回json数据并渲染HTML的⽅法html实例<table border="0" class="restaurant_food" cellspacing="0" cellpadding="1"><input type="text" name="dishes" value="" class="seek_product" placeholder="请输⼊菜名"/><button type='button' class="btn_nor" onclick="seek_product()">搜索</button><tr><th width="30%">序号</th><th width="70%">菜名</th></tr><tr data-id=""><td></td><td class="tl"> <p></p></td></tr></table>jquery实例function seek_product(){var product = $('.seek_product').val();$.ajax({type:'get',url:'/Cash/Index/seek_product',data:{name:product},success:function(res){var data = eval('('+res+')');var len = data.length;var cm = "";if(len > 0){for(var i = 0; i < len; i++){cm += '<tr data-id='+data[i]['id']+'>';cm += '<td>';cm += i+1;cm += '</td>';cm += '<td class="tl">';cm += '<p>'+data[i]["name"]+'</p>';cm += '</td>';cm += '</tr>';console.log(cm);$('.restaurant_food').html(cm);}}else{$('.restaurant_food').html('抱歉,没有这道菜!');}}})}php实例//搜索菜public function seek_product(){$shop_id = session("cashShopId");$name = I('');$map['name'] = array('like','%'.$name.'%');$map['shop_id'] = $shop_id;$map['status'] = 1;$productList = M('product')->field('id,name')->where($map)->select();echo json_encode($productList);}以上这篇jQuery中ajax请求后台返回json数据并渲染HTML的⽅法就是⼩编分享给⼤家的全部内容了,希望能给⼤家⼀个参考,也希望⼤家多多⽀持。
Jquery发送ajax请求以及datatype参数为textJSON⽅式Jquery发送ajax请求以及datatype参数为text/JSON⽅式1、⽅式⼀:datatype:'text'2、⽅式⼆:datatype:'JSON'3、使⽤gson-1.5.jar包和json-2.2.jar包处理JSON代码(注:使⽤json-2.2.jar包时,传给前端的结果,获取时不是json对象,需要var json = eval_r("("+data+")");转义⼀下。
⽽使⽤gson-1.5.jar包时,传给前端的结果就是json对象。
⽆需进⾏转义。
)1、⽅式⼀:datatype:'text'1.1 页⾯端的ajax请求:$.ajax({type: "POST",url: "<%=basePath%>getAllUser.action?randomNum="+new Date().getTime(),data : {},datatype : 'text',cache: false,async: false,success:function(data) {strHtml = data的处理结果; //对data数据进⾏处理,拼接成html代码块$("#userList").html(strHtml); //也可以使⽤:$("#userList").append(strHtml);}},error:function(){alert("获取⽤户信息失败,请联系管理员!");}});//end ajax1.2 后台java代码处理:public String getAllUser(){response.setContentType("text;charset=UTF-8");// 设置返回的⽂档类型response.setHeader("Cache-Control", "no-cache");response.setCharacterEncoding("UTF-8");PrintWriter out = null;String text = "";try {out = response.getWriter();} catch (Exception e) {text = "false";logger.error(e.getMessage());}//TODO 获取所有⽤户信息,遍历//text = "userId1,userId2,userId3";out.print(text);out.flush();out.close();return null;}2、⽅式⼆:datatype:'JSON'2.1 页⾯端的ajax请求:$.ajax({type: "POST",url: "<%=basePath%>getAllUser.action",datatype : 'JSON',cache:false,success : function(data) {$.each(data,function(entryIndex,entry){var userId=entry.id;var userName=erName;......// TODO strHtml = 构造显⽰的html代码块;// 以追加⽅式进⾏填充内容$("#userList").append(strHtml);});//end each}// end success2.2 后台java代码处理:public String getAllUser() throws Exception {try {response = ServletActionContext.getResponse();response.setContentType("application/json");response.setCharacterEncoding("gbk");List<User> userList = new ArrayList<User>();for (int i = 0; i < size; i++) {User user = new User();user.setUserId(i);user.setUserName("kobicc" + i);......//这个逻辑需要从数据库中获取结果即可。
jQuery通过ajax⽅法获取json数据不执⾏success的原因及解决⽅法1.jquery通过ajax⽅法获取json数据不执⾏success回调问题描述:jquery通过ajax⽅法获取json数据不执⾏success回调⽅法问题原因:json格式存在问题或不符合标准写法,导致总是执⾏error回调⽅法解决⽅案:使json格式务必符合下述3个标准写法: 1)键名称:⽤双引号括起; 2)字符串:⽤双引号括起; 3)数字,布尔值不需要使⽤双引号括起;注意:⼀定是双括号!2.jQuery中ajax使⽤json数据类型总是跳过success执⾏error语句执⾏函数error : function(XMLHttpRequest, textStatus, errorThrown) {//这个error函数调试时⾮常有⽤,如果解析不正确,将会弹出错误框 alert(XMLHttpRequest.responseText);alert(XMLHttpRequest.status);alert(XMLHttpRequest.readyState);alert(textStatus); // parser error;}就明⽩错误信息了;弹出的框⾥显⽰:<!DOCTYPE html PUBLIC "-//W3C //DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD /xhtml1-transitional.dtd">以及<?xml version="1.0" encoding="gb2312" ?>这两句话,虽然不清楚为什么,我删除之后,就成功执⾏ success了3.$.ajax()中的URL跨域时,总是不执⾏success,⽼进⼊error1)我加上ServletActionContext.getResponse().setHeader("Access-Control-Allow-Origin", "*");解决跨域问题,就顺利进⼊success了2)dataType:"json",去掉看能进success 不。
jqueryajax调⽤springboot接⼝发送json数据⽰例,兼容跨域调⽤,解决m。
本⽂主要解决三个问题:1.解决maven项⽬中引⽤本地lib⽬录的jar包时打包失败的问题2.解决spring boot开发的微服务接⼝中的跨域问题3.ajax 发送json数据的问题昨天研究 office 外接程序开发时,发现在插件中调⽤后台由 Spring boot 开发的接⼝并传递json时总是失败,调试了半天,尝试了$.ajax,$.post等⽅法服务端均⽆法获取到正确的请求,发送到后端的请求的格式是application/www-urlencode,⽽后端接受的是application/json格式的数据,由于⽤postman测试接⼝可以正常返回,应该可以说明后台接⼝没有问题。
1.解决maven项⽬中引⽤本地lib⽬录的jar包时打包失败的问题其实在⼀开始编写后台接⼝时,也遇到了⼀些问题,因为接⼝中引⽤了⼀个项⽬本地的lib⽬录中的jar包,⽽这个jar包并未⽤maven管理,所以调试和打包上遇到了⼀些问题,以前使⽤mvn clean install就可以完成的动作,现在⼀直报错,在pom中这样修改就可以解决了:<build><!-- 加上下⾯的,mvn命令会报错,现在直接调试完毕后,mvn package即可--><resources><resource><directory>lib</directory><targetPath>/BOOT-INF/lib/</targetPath><includes><include>**/*.jar</include></includes></resource></resources><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-compiler-plugin</artifactId><configuration><skip>true</skip></configuration></plugin><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-surefire-plugin</artifactId><configuration><skip>true</skip></configuration></plugin></plugins></build>2.解决spring boot开发的微服务接⼝中的跨域问题由于服务端⽇志中⼀直观察不到ajax调⽤的正确请求,于是祭出终极⼤杀器——抓包,打开WireShark,选择对应的⽹卡,参数设置成:ip.dst_host== 你接⼝服务器的ip && tcp.dstport ==你接⼝服务监听的端⼝抓包后发现,第⼀个HTTP请求竟然不是POST,⽽是OPTIONS:这不是我嘞个⼤擦了么…… ⽴马拿出万能钥匙——⾕歌搜索引擎开始解决问题,输⼊关键字“http options request”,看到第⼀条就应该是我要的答案了:沿着指路明灯给出的航向继续前进():OPTIONSThe HTTP OPTIONS method requests permitted communication options for a given URL or server. A client can specify a URL with thismethod, or an asterisk (*) to refer to the entire server.继续往下翻,看到了这段⽂字:In , a is sent with the OPTIONS method so that the server can respond if it is acceptable to send the request. In this example, we will request permission for these parameters:The header sent in the preflight request tells the server that when the actual request is sent, it will have a request method.The header tells the server that when the actual request is sent, it will have the X-PINGOTHER and Content-Type headers.我恍然⼤悟,原来是跨域调⽤的问题。
jQueryajax读取本地json⽂件的实例json⽂件{"first":[{"name":"张三","sex":"男"},{"name":"李四","sex":"男"},{"name":"王武","sex":"男"},{"name":"李梅","sex":"⼥"}]}js:⽅法⼀:$.ajax({url: "ceshi.json",//json⽂件位置type: "GET",//请求⽅式为getdataType: "json", //返回数据格式为jsonsuccess: function(data) {//请求成功完成后要执⾏的⽅法//each循环使⽤$.each⽅法遍历返回的数据date$.each(data.first, function(i, item) {var str = '<div>姓名:' + + '性别:' + item.sex + '</div>';document.write(str);})}})⽅法⼆:jQuery.getJSON()是jQuery.ajax()函数的简写形式// jQuery.getJSON( url [, data ] [, success ] )$.getJSON("ceshi.json", "", function(data) { //each循环使⽤$.each⽅法遍历返回的数据date$.each(data.first, function(i, item) {var str = '<div>姓名:' + + '性别:' + item.sex + '</div>';document.write(str);})});以上这篇jQuery ajax读取本地json⽂件的实例就是⼩编分享给⼤家的全部内容了,希望能给⼤家⼀个参考,也希望⼤家多多⽀持。
基于jQuery的AJAX和JSON的实例通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,然后通过jQuer把数据绑定到事先设计好的html模板上,直接在页面上显示。
我们先来看一下html模板:<table id="datas" border="1" cellspacing="0" style="border-collapse: collapse"><tr><th>订单ID</th><th>客户ID</th><th>雇员ID</th><th>订购日期</th><th>发货日期</th><th>货主名称</th><th>货主地址</th><th>货主城市</th><th>更多信息</th></tr><tr id="template"><td id="OrderID"></td><td id="CustomerID"></td><td id="EmployeeID"></td><td id="OrderDate"></td><td id="ShippedDate"></td><td id="ShippedName"></td><td id="ShippedAddress"></td><td id="ShippedCity"></td><td id="more"></td></tr></table>一定要注意的就是里面所有的id属性,这个是一个关键。
jquery中ajax请求的使⽤和四个步骤⽰例ajax() ⽅法⽤于执⾏ AJAX(异步 HTTP)请求,所有的 jQuery AJAX ⽅法都使⽤ ajax() ⽅法,该⽅法通常⽤于其他⽅法不能完成的请求。
基本的语法是:$.ajax({name:value, name:value, … })下⾯是通常使⽤的⽰例:$.ajax({type:'POST', // 规定请求的类型(GET 或 POST)url:uploadV, // 请求的url地址dataType:'json', //预期的服务器响应的数据类型data:{},//规定要发送到服务器的数据beforeSend:function(){ //发送请求前运⾏的函数(发送之前就会进⼊这个函数)// ....},success: function(result){ // 当请求成功时运⾏的函数//...},error:function(result){ //失败的函数//...},complete:function(){ //请求完成时运⾏的函数(在请求成功或失败之后均调⽤,即在 success 和 error 函数之后,不管成功还是失败都会进这个函数) // ...}});如果还需要其他参数,参考下⾯列举的⼀下其他的可以⽤到的名称和值:名称值/描述async布尔值,表⽰请求是否异步处理。
默认是 true。
beforeSend(xhr)发送请求前运⾏的函数。
cache布尔值,表⽰浏览器是否缓存被请求页⾯。
默认是 true。
complete(xhr,status)请求完成时运⾏的函数(在请求成功或失败之后均调⽤,即在 success 和 error 函数之后)。
contentType发送数据到服务器时所使⽤的内容类型。
默认是:”application/x-www-form-urlencoded”。
context为所有 AJAX 相关的回调函数规定 “this” 值。
Jquery中$.getScript() $.getJSON()和$.ajax()的用法总结jQuery 提供了一组用于特定异步加载的方法:$.getScript(),用于加载特定的JS 文件;$.getJSON(),用于专门加载JSON 文件。
有时我们希望能够特定的情况再加载JS 文件,而不是一开始把所有JS 文件都加载了,这时课时使用$.getScript()方法。
//点击按钮后再加载JS 文件$('input').click(function () {$.getScript('test.js');});$.getJSON()方法是专门用于加载JSON 文件的,使用方法和之前的类似。
$('input').click(function () {$.getJSON('test.json', function (response, status, xhr) {alert(response[0].url);}); });$.ajax()$.ajax()是所有ajax 方法中最底层的方法,所有其他方法都是基于$.ajax()方法的封装。
这个方法只有一个参数,传递一个各个功能键值对的对象。
//$.ajax 使用$('input').click(function () {$.ajax({type : 'POST', //这里可以换成GETurl : 'test.php',data : {url : 'ycku' },success : function (response, stutas, xhr) {$('#box').html(response);}});});注意:对于data 属性,如果是GET 模式,可以使用三种之前说所的三种形式。
如果是POST 模式可以使用之前的两种形式。
JQueryajax返回json时出现中⽂乱码该如何解决使⽤jQuery ajax调⽤的返回json,中⽂乱码问题Js代码如下:$.ajax({url: '/test/testAction.do?method=test',type: 'POST',dataType: 'json',timeout: 5000,async: false,error: function(){alert('获取数据失败!');},success: function(json){jsObject = eval(json);}});return jsObject;Js代码<span style="font-size: x-small;">$.ajax({url: '/test/testAction.do?method=test',type: 'POST',dataType: 'json',timeout: 5000,async: false,error: function(){alert('获取数据失败!');},success: function(json){jsObject = eval(json);}});return jsObject;</span>action:Java代码JSONArray json = JSONArray.fromObject(SysList);//SysList是⼀个List// 设置response的ContentType解决中⽂乱码response.setContentType("text/html;charset=UTF-8");response.getWriter().print(json.toString());return null;Java代码<span style="font-size: x-small;">JSONArray json = JSONArray.fromObject(SysList);//SysList是⼀个List// 设置response的ContentType解决中⽂乱码response.setContentType("text/html;charset=UTF-8");response.getWriter().print(json.toString());return null;</span>代码很简单就不做解释了。
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的⽤法总结详细解读Jquery各Ajax函数:$.get(),$.post(),$.ajax(),$.getJSON()⼀,$.get(url,[data],[callback])说明:url为请求地址,data为请求数据的列表,callback为请求成功后的回调函数,该函数接受两个参数,第⼀个为服务器返回的数据,第⼆个参数为服务器的状态,是可选参数。
⽽其中,服务器返回数据的格式其实是字符串形势,并不是我们想要的json数据格式,在此引⽤只是为了对⽐说明复制代码代码如下:$.get("data.php",$("#firstName.val()"),function(data){$("#getResponse").html(data); }//返回的data是字符串类型);⼆,$.post(url,[data],[callback],[type])说明:这个函数跟$.get()参数差不多,多了⼀个type参数,type为请求的数据类型,可以是html,xml,json等类型,如果我们设置这个参数为:json,那么返回的格式则是json格式的,如果没有设置,就和$.get()返回的格式⼀样,都是字符串的复制代码代码如下:$.post("data.php",$("#firstName.val()"),function(data){$("#postResponse").html();},"json"//设置了获取数据的类型,所以得到的数据格式为json类型的);三,$.ajax(opiton)说明:$.ajax()这个函数功能强⼤,可以对ajax进⾏许多精确的控制,需要详细说明的请参照相关资料复制代码代码如下:$.ajax({url: "ajax/ajax_selectPicType.aspx",data:{Full:"fu"},type: "POST",dataType:'json',success:CallBack,error:function(er){BackErr(er);}});四,$.getJSON(url,[data],[callback])复制代码代码如下:$.getJSON("data.php",$("#firstName.val()"),function(jsonData){$("#getJSONResponse").html(jsonData.id);}//⽆需设置,直接获取的数据类型为json,所以调⽤时需要使⽤jsonData.id⽅式);When Ajax meets jQuery 基于AJAX的应⽤现在越来越多,⽽对于前台开发⼈员来说,直接和底层的HTTPRequest打交道⼜不是⼀件令⼈愉快的事情。
jQuery中$.ajax解析xml、json格式数据$.ajax()方法参数详解:url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。
注意:这个要访问url必须与js文件在同一个域,否则会报错。
type: 要求为String类型的参数,请求方式(post或get)默认为get。
注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。
timeout: 要求为Number类型的参数,设置请求超时时间(毫秒)。
此设置将覆盖$.ajaxSetup()方法的全局设置。
async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。
如果需要发送同步请求,请将此选项设置为false。
注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行。
cache:要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false)。
设置为false将不会从浏览器缓存中加载请求信息。
data: 要求为Object或String类型的参数,发送到服务器的数据。
如果已经不是字符串,将自动转换为字符串格式。
get请求中将附加在url后。
防止这种自动转换,可以查看processData选项。
对象必须为key/value格式,例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。
如果是数组,jQuery将自动为不同值对应同一个名称。
例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
dataType: 要求为String类型的参数,预期服务器返回的数据类型。
如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。
基于jQuery的AJAX和JSON的实例通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,然后通过jQuer把数据绑定到事先设计好的html模板上,直接在页面上显示。
我们先来看一下html模板:<table id="datas" border="1" cellspacing="0" style="border-collapse: collapse"><tr><th>订单ID</th><th>客户ID</th><th>雇员ID</th><th>订购日期</th><th>发货日期</th><th>货主名称</th><th>货主地址</th><th>货主城市</th><th>更多信息</th></tr><tr id="template"><td id="OrderID"></td><td id="CustomerID"></td><td id="EmployeeID"></td><td id="OrderDate"></td><td id="ShippedDate"></td><td id="ShippedName"></td><td id="ShippedAddress"></td><td id="ShippedCity"></td><td id="more"></td></tr></table>一定要注意的就是里面所有的id属性,这个是一个关键。
jQuery操作Ajax和Json
嗯,自己学SSH和做项目也已有两个月了。
自己今天来整理一下自己在项目中利用jQuery操作过的Ajax和Json。
当时我对于jQuery操作Ajax几乎不怎么了解,但是项目中有需求,所以自己也是必须要去使用,因此现在来详细讲解一下自己在项目中的操作。
功能中,有一个下拉框,里面存储的是服务商的信息,首选项是“--请选择--”,当我选择第一个下拉框中服务商信息之后,后面紧接着将会得到这个选定的服务商下的所有产品。
做一个联动操作。
虽然我不会用jQuery操作Ajax,但是我第一反应就是想到利用这块技术,于是自己就开始查找对应的资料了。
首先,我在Action中,将服务商的信息从数据库查找出来,保存到List集合中,将集合转发到JSP界面上,利用的是struts2标签:
<div>
<s:select name="provider.iscenicid"list="#request.providerList"listKey="i scenicid"
listValue="szcenicname"headerKey=""headerValue="--请选择"
onchange="onChangeOptionScenic(this)"id="scenicType"/></s:select>
<span id="productInfo"></span>
</div>
(ps:其实这个里面,本不应该设置headerKey和headerValue,应该在Action中在List集合中去增加一行再进行操作。
)
中间的span标签就是将要利用jQuery操作Ajax把产品信息增加到span标签里面!
其次,进行jQuery操作Ajax了:
<script>
function onChangeOptionScenic(_this) {
// 获取下拉框中的listKey值
var iscenic =$(_this).val();
// 设置一个变量,来进行下面的操作
var htmltv ="";
// 设置URL地址
var url ="/tips/travelmessage.action";
// Ajax操作开始
$.ajax ({
// 设定URL
url : url,
// 设置提交方式,这里为post
type : "post",
// 设置数据类型为Json
dataType : "json",
// 设置传过去的值的属性名
data : {"iscenicid" : iscenic},
// 成功返回之后的操作方法
success : function(result) {
// 获取Action中传回来的result的值
var json =eval("("+result+")");
// 循环将服务商下的产品以复选框形式拼接出来
for(var i=0; i<json.length; i++) {
// 将产品信息以复选框形式拼接起来
htmltv +="<input type='checkbox' name='productNa me'
value='"+json[i].productId+"'/>"+json[i].prod uctName;
}
// 添加到上面的span标签中
$("#productInfo").val(htmltv);
}
});
}
</script>
最后,将result进行一个映射文件的配置,配置信息如下(根据公司的一些设定而操作):<action name="travelmessage"class="com.web.system.tips.TravelMessageAction" method="trav elMessage">
<result type="json">
<param name="root">result</param>
</result>
</action>
在TravelMessageAction中,需要将内容返回到result中,部分代码如下:
List productList = travelMessageService.getProductInfo(product);
JSONArray json =new JSONArray().fromObject(productList);
result = json.toString();
return SUCCESS;
至此,一个完整的操作已完成,这就是自己的一点点整理,希望以后有更多的有技术的知识与大家分享!。