xml地图|网站地图|网站标签 [设为首页] [加入收藏]

jQuery使用ajax方法解析返回的json数据功能示例,

来源:http://www.ccidsi.com 作者:集成经验 人气:109 发布时间:2019-06-05
摘要:上述这篇使用ajax接收后台发送过来的json数据格局正是我分享给大家的全体内容了,希望能给我们1个参谋,也期望我们多多匡助脚本之家。 代码清单1.伍:demo.java 除此两点,还应该有供

上述这篇使用ajax接收后台发送过来的json数据格局正是我分享给大家的全体内容了,希望能给我们1个参谋,也期望我们多多匡助脚本之家。

代码清单1.伍:demo.java

除此两点,还应该有供给专注的是,如果你选择的是jq一.四,那么他对json的格式有着更严格的需要,全部的key和脾性都要用双引号申明起来,即使key不用双引号原生的js是允许的,但是jq1.四仿佛有那一个必要。

您或然感兴趣的篇章:

  • 动用ajax传递数组及后台接受的艺术详解
  • jQuery使用ajax方法解析重返的json数据作用示例
  • jquery用ajax格局从后台获取json数据后怎么着将内容填充到下拉列表
  • 浅析Ajax后台success传来json数据的主题素材
 carnameSelect.change(function(){
 var carname = carnameSelect.val();
 if(carname != "") {
 //汽车厂商不为空发起ajax请求
 $.post("../chainSelect", {keyword: carname, type : "top"}, function(data){
 if(data != null && data.length != 0) {
  //清除上一次change的内容
  cartypeSelect.html("");
  $("<option value=''>请选择汽车类型</option>").appendTo(cartypeSelect);
  for(var i = 0; i < data.length; i  ) {
  $("<option value='" data[i] "'>" data[i] "</option>").appendTo(cartypeSelect);
  }
  $(".cartype").show();
  carnameSelect.next("img").show();
 }
 }, "json");
 } else {
 //3.如果值为空,那么第二个下拉框所在span要隐藏起来,第一个下拉框后面的指示图片也要隐藏
 $(".cartype").hide();
 $(".wheeltype").hide();
 $(".carimage").hide();
 $(this).next("img").hide();
 }
 });

不久前在用jQuery的ajax方法传递接收json数据时发掘二个难点,那正是回来的data数据,有的时候候能够一贯作为json数据运用,可有的时候又丰硕。查了些资料,解释如下:

jsp页面代码

先将首先级下拉框内容抽取来,假如值为空,那么第三个下拉框所在span要潜伏起来,第二个下拉框后边的指令图片也要藏匿。固然有内容, 则用该行代码$.post(“../chainSelect”, {keyword: carname, type : “top”}, function(data){}, “json”)向上诉的Serlvet发起post请求,post的率先个参数是Serlvet的后台地址,第二个参数画括号括起来的json数据,首个参数是回调函数,第多个参数”json”评释发送的json数据。在回调函数中,参数data接收Serlvet重回的值,由于Serlvet重回的是足以深入分析为字符串数组的数量,所以用for循环来遍历获得的数目,并生成option新节点appenTo()插入到select之后。

在线JSON代码查验、核准、美化、格式化学工业具:

明天给大家带来三个简易的选用ajax接收后台重返json格式的demo

后台Serlvet管理如下(当然你可以选择java框架,也能够运用其余后台语言)。

JSON**在线格式化学工业具:
**

写那些demo也费了极大劲,终究是菜鸟,也从漏洞百出中学到了相当的多,比方dataType写成datatype时ajax暗中认可接收的数码是为text那样形成自家接二连三循环不了,还应该有便是json数据的格式是不行战战兢兢的

name 可选。规定要取回的数指标名号。
要是未有明确名称,则该办法将以指标的格局从要素中回到全数存款和储蓄的数据。

在线json压缩/转义务工作具:

后台代码

name = John
time = 2pm

C语言风格/HTML/CSS/json代码格式化美化学工业具:

package com.sidan.jsonutil;

public class Person {
 private String name;
 private String sex;
 private int age;
 public String getName() {
  return name;
 }
 public void setName(String name) {
  this.name = name;
 }
 public String getSex() {
  return sex;
 }
 public void setSex(String sex) {
  this.sex = sex;
 }
 public int getAge() {
  return age;
 }
 public void setAge(int age) {
  this.age = age;
 }

}

name : fly
type : 虫子

这种情形下jquery的ajax方法就不会进来success方法,只好用complete接收,并且想要深入分析data里的json数据的话,必须对data.responseText实行eval ()也许 $.parsejson();

package com.sidan.outjson;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.sidan.jsonutil.GetJson;
/**
 * Servlet implementation class OutJson
 */
@WebServlet("/OutJson")
public class OutJson extends HttpServlet {
 private static final long serialVersionUID = 1L;

 /**
  * @see HttpServlet#HttpServlet()
  */
 public OutJson() {
  super();
  // TODO Auto-generated constructor stub
 }

 /**
  * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
  */
 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  doPost(request,response);
 }

 /**
  * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
  */
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  response.setCharacterEncoding("UTF-8");
  PrintWriter out = response.getWriter();
  String s = GetJson.getJson();
  out.print(s);
 }

}

后台之需求给jsonStr赋值为数组格式而已,而前者jQuery代码由于接到到的字符串数组,所以这里须求用遍历数组的样式来遍历。

在线XML/JSON相互转变工具:

<pre name="code" class="html"><%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<!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=ISO-8859-1">
<title>Insert title here</title>
<script src="jQuery/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
 $(function(){
  $("#btn").click(function(){
   var url = "OutJson";
   $.ajax({
    url:url,
    type:"post",
    dataType:"json",
    error:function(XMLHttpRequest, textStatus, errorThrown){
     alert(XMLHttpRequest);
     alert(textStatus);
     alert(errorThrown);
    },
    success:function(data){
     $.each(data,function(idx,obj){
      var li = document.createElement("li");
      li.innerHTML = "<a>"   obj.name   "</a>";
      document.getElementById("ul1").appendChild(li);
     });
    }
   });
  });

 });
</script>
</head>
<body>
 <ul id="ul1"></ul>
 <input type="button" value="循环" id="btn"/>
</body>
</html>

前端jQuery代码:

瞩望本文所述对大家jQuery程序设计具备援助。

Pserson类

代码清单一.七:ChainSelect.java

PS:关于json操作,这里再为大家推荐两款比较实用的json在线工具供我们参谋运用:

废话十分的少说平昔上代码

从被选成分中回到附加的数据。

$.ajax({
  url: ajaxurl,
  type: "POST",
  success: function(data){
   //假设返回的json数据里有status及info2个属性
   //有时候可以直接ajaxobj.status或者ajaxobj["status"]去访问
   //但有时候,却要通过eval()或者 $.parsejson();才可以通过ajaxobj.status访问,而且这种情况下,需要是complete而不是success
   ajaxobj=eval("(" data ")");
   //或者$.parsejson()
   //var ajaxobj = $.parsejson(data);
   if(ajaxobj.status=="0")
   {
    alert("请登陆.");
   }
   else if(ajaxobj.status=="1")//未绑定微博
   {
    alert(ajaxobj.info);
   }
   return true;
  },
  error:function(ajaxobj)
  {
     if(ajaxobj.responseText!='')
     alert(ajaxobj.responseText);
  }
});

将数据包装成json格式类(数据直接是循环加多的所以一样这里是为着轻便)

css代码如下:

上述是自己个人的主张跟驾驭,若有不一样思想招待指教.

package com.sidan.jsonutil;

import java.util.ArrayList;

public class GetJson {

 public static String getJson(){

  return json().toString();
 }

 public static StringBuffer json(){
  StringBuffer sb = new StringBuffer();
  ArrayList<Person> arr = initArray();
  int x = 0;
  sb.append("[");
  for(Person p:arr){
   sb.append("{");
   sb.append(""name"");
   sb.append(":");
   sb.append(""" p.getName() """);
   sb.append(",");
   sb.append(""age"");
   sb.append(":");
   sb.append(""" p.getAge() """);
   sb.append(",");
   sb.append(""sex"");
   sb.append(":");
   sb.append(""" p.getSex() """);
   sb.append("}");
   if(x != arr.size()-1){
    sb.append(",");
   }
   x  ;
  }
  sb.append("]");
  return sb;
 }

 public static ArrayList<Person> initArray(){
  ArrayList<Person> arr = new ArrayList<Person>();
  for(int i = 0;i < 10;i  ){
   Person p = new Person();
   p.setName("sdchen");
   p.setAge(20);
   p.setSex("man");
   arr.add(p);
  }
  return arr;
 }
}

前天来完结jQuery实战的级联下拉框效果。效果效用如下:

您或许感兴趣的小说:

  • jquery的ajax异步请求接收再次来到json数据实例
  • 基于jQuery的AJAX和JSON达成纯html数据模板
  • JQuery管理json与ajax重回JSON实例代码
  • 什么将ajax请求再次回到的Json格式数据循环输出成table格局
  • jQuery通过Ajax返回JSON数据
  • jQuery中ajax请求后台重临json数据并渲染HTML的法子

就因为最终多了二个逗号就变成连日出错,并且循环不了,最终将错误打字与印刷出来才晓得那一个格式是错了的

概述:

怎么样是常量字符串呢,常量字符串正是指直接用“”组成的字符串,未有定义String 变量直接把1串“”print到前台的情形,就足以一直data.属性名访问,而且jquery端只要写success就可以获得。

代码清单1.二:chainSelect.css

正文实例讲述了jQuery使用ajax方法剖判重临的json数据功用。分享给大家供我们参照他事他说加以侦查,具体如下:

页面暗中同意只提供小车厂家,当选取了切实的某品牌小车,小车档期的顺序下拉框就能动态的来得出来,选择相应的品种,然后出去该小车项目对应的皮带类型下拉框展现出来,选中轮胎类型,页面包车型地铁正中间会显得出小车的图片。
思路解析如图:

更加多关于jQuery相关内容感兴趣的读者可查阅本站专项论题:《jquery中Ajax用法计算》、《jQuery操作json数据技能汇总》、《jQuery form操作本事汇总》、《jQuery常用插件及用法总计》、《jQuery扩大工夫总括》、《jQuery表格(table)操作本领汇总》及《jquery选用器用法总计》

代码清单1.陆:demo.java

可见一向data.属性名访问的状态,服务器端代码一定是直接return的贰个常量字符串。

$(document).ready(function(){
 //找到三个下拉框
 var carnameSelect = $(".carname").children("select");
 var cartypeSelect = $(".cartype").children("select");
 var wheeltypeSelect = $(".wheeltype").children("select");

 carnameSelect.change(function(){
 console.log("汽车厂商触发onChange事件");
 });
 cartypeSelect.change(function(){
 console.log("汽车类型触发onChange事件");
 });
 wheeltypeSelect.change(function(){
 console.log("车轮触发onChange事件");
 });
});

json**代码在线格式化/美化/压缩/编辑/调换工具:
**

jQuery代码的思绪是,用class采纳器选择出多个下拉框,赋值给变量carnameSelect,cartypeSelect,wheeltypeSelect,暗中认可carnameSelect下拉框是体现的,其余下拉框是隐匿。然后给他们叁者注册change()事件,当用户选拔下拉框的值的时候试行事件函数体里面包车型的士从头到尾的经过。这里小编以第3流下拉框为例来说解处理的经过。假使用户挑选了第二流下拉框”汽车商家”的”BMW”,则实行如下代码:

先证实第三种意况:

以上就是本文的全体内容,希望对我们的读书抱有援助,也期待大家多多协助脚本之家。

这种场馆是因为服务器端向外print的时候是2个String对象,日常此类主题素材在自己的代码里是因为后台json相比复杂,在公司的时候本身利用了StringBuffer,然后最后print的时候print的是StringBuffer对象的toString,所以就一定于print了叁个String对象

到此大约把级联效果落到实处了,不过一旦在高并发情状下,每一回用户切换选项都向服务器发送请求,服务器的压力恐怕过大。所以这里大家用jQuery的缓存来保存那个已经缓存过的央浼。能够选择jQuery的data()方法。

上边是导致要eval并且无法跻身success的来由:

本文由68399皇家赌场发布于集成经验,转载请注明出处:jQuery使用ajax方法解析返回的json数据功能示例,

关键词: 68399皇家赌场

最火资讯