如何使用ajax将json传入后台数据
发布网友
共4个回答
懂视网
jsp
<%@ page language="java" import="java.util.*,com.sy.City,com.sy.CityService,net.sf.json.JSONArray" pageEncoding="ISO-8859-1"%>
<%
//接受传过来的数据
String strid=(String)request.getParameter("id");
Integer id=Integer.parseInt(strid);
//根据id获得书名列表
List<City> citylist=new CityService().getCityByCategory(id);
//设置传输编码
response.setContentType("text/html;charset=UTF-8");
//将json解析后输出到前台
out.println(JSONArray.fromObject(citylist));
%>
java City.java
package com.sy;
public class City {
Integer cid;
String cname;
public Integer getId() {
return cid;
}
public void setId(Integer id) {
this.cid = id;
}
public String getName() {
return cname;
}
public void setName(String cname) {
this.cname = cname;
}
public City(Integer cid, String cname) {
super();
this.cid = cid;
this.cname = cname;
}
}
java CityService.java
package com.sy;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class CityService {
static Map<Integer , List<City>> CityDb = new HashMap<Integer , List<City>>();
static {
List<City> list1 = new ArrayList<City>();
List<City> list2 = new ArrayList<City>();
List<City> list3 = new ArrayList<City>();
list1.add(new City(1 , "山东"));
list1.add(new City(1 , "北京"));
list1.add(new City(1 , "上海"));
list2.add(new City(2 , "美1"));
list2.add(new City(2 , "美2"));
list3.add(new City(3 , "英1"));
list3.add(new City(3 , "英2"));
list3.add(new City(3 , "英3"));
CityDb.put(1 , list1);
CityDb.put(2 , list2);
CityDb.put(3 , list3);
}
public List<City> getCityByCategory(int categoryId) {
return CityDb.get(categoryId);
}
}
虚拟数据库_json_ajax
标签：coding pen ajax 解析 map end jquer innerhtml oct
热心网友
首先采用jquery内部封装好的方法是比较简单的，我们只需做的就是修改里面的一些配置：
以下代码是对$.ajax()的解析：
$.ajax({
type: "POST", //提交方式
contentType: "application/json; charset=utf-8", //内容类型
dataType: "json", //类型
url: "前台地址/后台方法", //提交的页面，方法名
data: "parameter", //参数，如果没有，可以为null
success: function (data) { //如果执行成功，那么执行此方法
alert(data.d); //用data.d来获取后台传过来的json语句，或者是单纯的语句
},
error: function (err) { //如果执行不成功，那么执行此方法
alert("err:" + err);
}
});
当然我初次学习的时候，看到这些也是有些茫然的，因为不知道到如何才能将其用到自己的程序里面，所以就写了一个小的检测网页来测试一下，如果你测试的时候没有达到你想要的结果，那么希望你回头看一下，前台是否写的有问题，或者是参考一下下文中的注意事项吧。
前台代码 ：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="number3.aspx.cs" Inherits="ajax1.number3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>测试ajax</title>
<script src="js/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function testAjax() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "number3.aspx/GetJson",//传入后台的地址/方法
data: "{'RID':'123'}",//参数，这里是一个json语句
success: function (data) {
var result = data.d;
alert(result);
},
error: function (err) {
alert("err:" + err);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<button >用button测试ajax</button>
<input type="button" value="testAjax" />
</div>
</form>
</body>
</html>
后台代码：
using System;
using System.Web.Services;
namespace ajax1
{
public partial class number3 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string GetJson(string RID)
{
return "{'ID':'" + RID + "'}";
}
}
}
后台代码中以*为背景的就是我们要注意的地方：
1.using System.Web.Services;对应下面的[WebMethod]这个一定要加上的。
2.后台写的方法一定是公共静态的即一定是public static开头的。
3.参数一定是前台的data所传参数的键
前台中要注意的地方：
1.大家应该会注意到，前台我用的是两个button来测试，但是第一个<button>是不行的，页面会刷新一下，其实这都是<form
id="form1"
runat="server">这行代码的问题，<button>标签会提交本页面的内容，从而导致异步刷新失败。所以建议大家不要用<button>标签。但是如果不得不用的话，解决办法还是有的，目前我知道的只有两个：
①：将<form id="form1"
runat="server">代码去掉，当然如果本页面有要提交的内容就会很麻烦了
②：将<button onclick="aaa();return
false;">用button测试ajax</button>代码改为：<button
onclick="aaa();return false;">用button测试ajax</button>
2。前台的测试结果是：
那么我们如何来只获取json后面的值，而不是整个json语句呢，我们可以将json语句对象化，然后根据键来取得对应的值：前台的testAjax()的方法改为：
function testAjax() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "number3.aspx/GetJson",
data: "{'RID':'123'}",
success: function (data) {
var result = eval("(" + data.d + ")");//这句话是将json语句对象化
alert(result.ID);
},
error: function (err) {
alert("err:" + err);
}
});
}
此时结果为：
以上就是初步学习json当时遇到的问题所留下的经验。同时我想验证一下是否能够在后台重载方法来实现根据前台的data是否有参数来判断要执行的方法，所以我将代码改动了一下：
改动后的前台代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="number3.aspx.cs" Inherits="ajax1.number3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>测试ajax</title>
<script src="js/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function testAjax() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "number3.aspx/GetJson",
data: "{'RID':'123'}",
success: function (data) {
var result = eval("(" + data.d + ")");
alert(result.ID);
},
error: function (err) {
alert("err:" + err);
}
});
}
function aaa() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "number3.aspx/GetJson",
success: function (data) {
alert(data.d);
},
error: function (err) {
alert("err:" + err);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<button >用button测试ajax</button>
<input type="button" value="testAjax" />
<input type="button" value="aaa" />
</div>
</form>
</body>
</html>
改动后的后台代码
using System;
using System.Web.Services;
namespace ajax1
{
public partial class number3 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string GetJson()
{
return "hello ajax";
}
[WebMethod]
public static string GetJson(string RID)
{
return "{'ID':'" + RID + "'}";
}
}
}
所得的效果为：
第一个和第二个按钮点击后效果为：
第三个按钮点击后效果为：
所以我的初步结论为：后台的重构函数是不成功的，如果有的重构参数的话，只会执行带参数的，而不会执行那个不带参数的。现在还不是太明白为什么会这样，所以希望明白原理的分享一下自己的观点。当然这只是个人观点，如若有误，望请指正。
热心网友
proCityArea_JsonData.js
proCityAreaJsonData2();
});
//前台ajax的参数data提交jsonObj
function proCityAreaJsonData1(){
$.ajax({
type:"post",
url:myContextPath+"/back/sqlTable/jsonData1",
data:{pCAJson: JSON.stringify(pCAJson)},//或data:{"pCAJson": JSON.stringify(pCAJson)} 。data的key键可""，也可不""
dataType:"json",//dataType是接收服务器的时候的数据类型
success:function(data){
},
error:function(){
}
});
}
//前台ajax的参数data提交jsonStr
function proCityAreaJsonData2(){
var pCAJsonObj={"pCAJson":pCAJson};
var jsonObjStr=JSON.stringify(pCAJsonObj);
$.ajax({
type:"post",
url:myContextPath+"/back/sqlTable/jsonData2",
contentType:"application/json;charset=utf-8,application/json",//contentType是传输过去的时候的数据类型
data:jsonObjStr,//data的key键可""，也可不""
dataType:"json",//dataType是接收服务器的时候的数据类型
success:function(data){
},
error:function(){
}
});
}
JsonDataToSQL.java
@Controller@RequestMapping("/back/sqlTable")
public class JsonDataToSQL {
public static void main(String[] args) {
}
/**
*
* @Description: TODO(前台ajax的参数data提交jsonObj,到后台)
* @param request
* @param response
* @param params
* @return
* @Grammer1:request.getParameter("key");
根据map对象的key-value格式，此getParameter方法的参数为key，返回值为字符串类型value。
key的属性值value必须为字符串类型，否则null。
* @Grammer2:若前台ajax的参数data提交jsonStr。可以使用data:{param:JSON.stringify(data)}的方式就能将对象变成字符串,同时指定contentType:"application/json",dataType: "json",这样就可以轻易的将一个对象或者List传到后台。
若前台ajax的参数data提交jsonObj。
后台@RequestBody接收的其实是一个Json对象的字符串，而不是一个Json对象。
*/
@RequestMapping("/jsonData1")
@ResponseBody
public static String ergodicJsonDataToListMap1(HttpServletRequest request,HttpServletResponse response,@RequestParam Map<String, Object> params){
String pCAJsonStr1=(String) params.get("pCAJson");
String pCAJsonStr2=request.getParameter("pCAJson");
return pCAJsonStr2;
}
/**
*
* @Description: TODO(前台ajax的参数data提交jsonStr,到后台)
*/
@RequestMapping("/jsonData2")
@ResponseBody
public static String ergodicJsonDataToListMap2(HttpServletRequest request,HttpServletResponse response,@RequestBody String pCAJsonStr){
//String paramVal=request.getParameter("pCAJson");//由于前台ajax传来的jsonStr中，pCAJsonObj={"pCAJson":pCAJson};pCAJson键对应的值，数据类型不是字符串。//null
pCAJsonStr=pCAJsonStr;
return pCAJsonStr;
}
}
热心网友
首先，我们来写一下后台如何生成要传输的数据:
这样，就可以把数据无刷新的写入到数据库。
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
