Ajax 传JSON，请求出错实践笔记

来源：互联网发布：过期域名删除查询编辑：程序博客网时间：2024/06/14 20:22

对于Ajax，有接触的人应该或多或少有接触，学习的话，网上有很多资源，这里就不说了。想说的是要弄明白Ajax的实质，然后要理解每个参数所起到的作用。

对于Json是轻量级是轻量级的文本数据交换格式，使用js语法，要将后台的集合对象传递到后台就可以使用JSON。

由于前端写得不多，今天在做一个系统时，用到了JSON+Ajax，是将后台servlet中的List集合转成json对象，然后前台用js写ajax进行接收解析，但是在前台一直取不到json数据，找了很久，Bug是出了Ajax请求响应上面。对Ajax请求实质很模糊，下面用小例子来说明下：

使用的是原生态的servlet+jsp+js+Ajax+json.Ajax使用是想通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。常用格式为：

$ajax.({

url：当前页地址。发送请求的地址。

type：“POST”/"GET"

data: 要向后台传送的数据，

dataType: 数据类型，

success:function(msgt){},

error:function(){}

})

自己就是在url跟servlet请求跳转弄混了，来看下面：

import java.io.IOException;import java.io.PrintWriter;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;import net.sf.json.JSONArray;//建一个servletpublic class testServlet extends HttpServlet{private static final long serialVersionUID = 1L;@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {List<User> user = new ArrayList<User>;ProntWriter out = resp.getWriter();//为了节省时间，加入了三个同样的对象for(int i = 0;i<3;i++ ){User ur = new User();ur.setName("tom");ur.setPhone("1001");user.add(ur);}<pre name="code" class="html">//将User转换为JSON格式JSONArray json = JSONArray.fromObject(user);out.write(json.toString());//req.getRequestDispatcher("xx.jsp").forward(req, resp);

}//User 类

<pre name="code" class="java">public class User{private String name;private int phone;//省略getter and setter.......}

<span style="font-family: monospace; white-space: pre; background-color: rgb(240, 240, 240);">xx.jsp页面：</span>

<span style="font-family: monospace; white-space: pre; background-color: rgb(240, 240, 240);"></span><pre name="code" class="html"><%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title></title><meta http-equiv="pragma" content="no-cache" />

<meta http-equiv="cache-control" content="no-cache" /

><meta http-equiv="expires" content="0" />

<link rel="stylesheet" href="css/reset.css" type="text/css">

<link rel="stylesheet" href="css/login.css" type="text/css">

</head>

<body>

<div class="wrapper"><tr>

<td align="right" style="vertical-align: middle;">名字</td>

<td><input type="text" value="user_id"/></td></tr>

<tr><td align="right" style="vertical-align: middle;">电话</td>

<td><input type="text" value="phone"/></td></tr

><tr><td colspan="2" align="center"><button class="btn btn-primary" type="button" >显示</button></td></tr>

</div><script type="text/javascript" src="js/jquery-1.11.2.min.js">

</script><script type="text/javascript" src="js/login.js"></script>></body></html>

xx.js

$(".btn").click(function(){<span style="font-family: Arial, Helvetica, sans-serif;"></span>

$.ajax({url : "xx.do",type : "POST",dataType : "json",  <span style="white-space:pre"></span>success:function(msg){$("#user_id").html(msg[0].name);$("#phone".html((msg[0].phone));      <span style="white-space:pre"></span>},   <span style="white-space:pre"></span> <span style="white-space:pre"></span>error: function(er){    <span style="white-space:pre"></span>console.log(er);   <span style="white-space:pre"></span> }  });});});

例子是简单的取得后台传送过来的json对象，并在页面进行加载显示；在web.xml对servlet进行配置。url为 xx.do ，但是在servlet中加上

<span style="color:#ff0000;">req.getRequestDispatcher("xx.jsp").forward(req, resp); 进行跳转</span>

即：

//将User转换为JSON格式<span style="white-space:pre"></span>JSONArray json = JSONArray.fromObject(user);<span style="white-space:pre"></span>out.write(json.toString());

    <span style="color:#ff0000;"> req.getRequestDispatcher("xx.jsp").forward(req, resp);</span>

此时将会拿不到值，因为你的ajax作用的是xx.do，而你在servlet中就已经进行的跳转，跳到了xx.jsp中，所以servlet返回的是在xx.do中，不是在jsp中，所以自己总结的是假如要在servlet中进行跳转，重定向，那么ajax作用要设置在原先的路径，而不是跳转后的路径。

0 0