GVKun编程网logo

ajax（第一篇）将json数据提交到action并解析（ajax提交json格式数据）

21

此处将为大家介绍关于ajax的详细内容，并且为您解答有关第一篇将json数据提交到action并解析的相关问题，此外，我们还将为您介绍关于AJAXMVC服务器返回Json数据，客户端获取Json数据、

此处将为大家介绍关于ajax的详细内容，并且为您解答有关第一篇将json数据提交到action并解析的相关问题，此外，我们还将为您介绍关于AJAX MVC 服务器返回Json数据，客户端获取Json数据、Ajax使用Action中返回的Json数据的完整实例(二)：action内将一个实体对象转化为json并返回、Ajax使用Action中返回的Json数据的简单实例(一)、ajax动态加载json数据并解析的有用信息。

本文目录一览：

ajax（第一篇）将json数据提交到action并解析（ajax提交json格式数据）

ajax（第一篇）将json数据提交到action并解析（ajax提交json格式数据）

<%@ 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=UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="json2.js"></script>

<script type="text/javascript">

var myAjaxObject;

function AjaxTransferText() {

var BigText = document.getElementById("BigText").value;

var AjaxTransferObjectRef = new AjaxTransferObject("username","password",

10,BigText);

var JSONString = JSON.stringify(AjaxTransferObjectRef);

if(window.ActiveXObject){

myAjaxObject = new ActiveXObject("Microsoft.XMLHTTP");

}else {

myAjaxObject = new XMLHttpRequest();

}

var urlString = "jsonString=" + JSONString;

alert(urlString);

myAjaxObject.open("POST","getJSON.action"+"?timestamp" + new

Date().getTime(),true);

myAjaxObject.setRequestHeader("Content-Type",

"application/x-www-form-urlencoded")

myAjaxObject.send(urlString);

}

function AjaxTransferObject(username,password,age,BigText){

this.username = username;

this.password = password;

this.age = age;

this.BigText = BigText;

}

function AjaxTransferTextByget(){

var BigText = document.getElementById("BigText").value;

var AjaxTransferObjectRef = new AjaxTransferObject("username","getJSON.action"+urlString,

"application/x-www-form-urlencoded")

}

</script>

</head>

<body>

<textarea rows="5" cols="45" id="BigText"></textarea>

<br/>

<input type="button" value="test" onclick="AjaxTransferText()">

<input type="button" value="test" onclick="AjaxTransferTextByget()">

</body>

</html>


Action代码如下：

package controller;


import com.opensymphony.xwork2.ActionSupport;


import net.sf.json.JSONObject;


public class GetJSON extends ActionSupport{

private String jsonString;

public String getJsonString(){

return this.jsonString;

}

public void setJsonString(String jsonString){

this.jsonString = jsonString;

}

@Override

public String execute() throws Exception {

System.out.println(jsonString);

JSONObject json = JSONObject.fromObject(jsonString);

System.out.println("username=" + json.get("username"));

System.out.println("password=" + json.get("password"));

System.out.println("age=" + json.get("age"));

System.out.println("BigText=" + json.get("BigText"));

return null;

}

}

AJAX MVC 服务器返回Json数据，客户端获取Json数据

AJAX MVC 服务器返回Json数据，客户端获取Json数据

<>

控制器 Controller

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Web.Script.Serialization; namespace MvcApplication2.Controllers { public class HomeController : Controller { public ActionResult Index() { return View(); } //---------------------------------第一种写法：服务器返回一个Json对象 public ActionResult GetData1() { JsonResult json = new JsonResult(); json.JsonRequestBehavior = JsonRequestBehavior.AllowGet; //允许来自客户端的HTML GET请求 json.Data = new { code = 0,message = "成功" }; return json; //这里直接返回一个json对象给客户端，客户端通过ajax的请求后，获得的直接就是一个json对象，不需要再用$.parseJSON(data)这个方式将字符串转换成Json对象了，因为取到的本身就是一个json对象，而不是一个字符串。 } //---------------------------------第二种写法：服务器返回一个Json对象 public ActionResult GetData2() { //其实调用的是JsonResult类下的这个方法：protected internal JsonResult Json(object data); //注意：Json()是一个方法，参数是一个object类型的对象，返回值是JsonResult类型 return Json(new { code = 0,message = "ON" }); //通过测试：采用这种形式，客户端只能通过异步的Post请求才能取到数据，如果异步Get请求，无法获取数据 } //---------------------------------第三种写法：服务器返回一个Json格式的字符串 public ActionResult GetData3() { JavaScriptSerializer json = new JavaScriptSerializer(); var jsonObj = new { code = 1,message = "OK" }; //构造一个对象 string jsonStr = json.Serialize(jsonObj); //将这个对象转换成json格式的字符串 return Content(jsonStr); //返回一个json格式的字符串。 所以客户端通过ajax请求后，获得的这个数据仅仅是一个json格式的字符串，所以需要用$.parseJSON(data)这个方式将字符串转换成Json对象 } } }

视图 View

<html> <head> <Meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/jquery-1.11.2.js"></script> </head> <body> <div> <button id="submit1">提交1</button> <button id="submit2">提交2</button><button id="submit3">提交3</button> </div> </body> </html> <script type="text/javascript"> $(function () { $("#submit1").click(function () { $.get("/Home/GetData1",function (data) { //服务器端返回的是一个Json对象，所以这个data是一个json对象，并不是一个json格式的字符串。 alert(data.code); //打印出：0 alert(data.message);//打印出：成功 //除了以上的取值方式外下面的方式也是可以取到值的 alert(data["code"]); //打印出：0 alert(data["message"]); //打印出:成功 }) }) }) </script> <script type="text/javascript"> $(function () { $("#submit2").click(function () { //不知道为什么这种一定要是异步Post请求，如果是异步Get请求无法取到数据 $.post("/Home/GetData2",function (data) { //服务器端返回的是一个Json对象，所以这个data是一个json对象，并不是一个json格式的字符串。 alert(data.code); //打印出:0 alert(data.message); //打印出:ON }) }) }) </script> <script type="text/javascript"> $(function () { $("#submit3").click(function () { $.get("/Home/GetData3",function (data) { //服务器返回的是一个json格式的字符串，所以这个data是一个字符串，并不是一个对象 var jsonObj = $.parseJSON(data); //将这个字符串 转换成json对象 alert(jsonObj.code); //打印出:1 alert(jsonObj.message); //打印出:OK }) }) }) </script>

Ajax使用Action中返回的Json数据的完整实例(二)：action内将一个实体对象转化为json并返回

Ajax使用Action中返回的Json数据的完整实例(二)：action内将一个实体对象转化为json并返回

实现方法：使用JSONArry对象，将装载在list里的实体类集转化为json，在jq中使用eval("("+data+")")方法将其转化为jq可读取的json数据

Struts.xml

<action name="myAjaxAction"method="myAjaxAction"><interceptor-ref name="mystack" /></action>


Action.java

public void myAjaxAction(){ try{ HttpServletResponse responses = ServletActionContext.getResponse(); //设置编码格式,注：位置需在list前，否则utf-8格式会不对list起作用，导致乱码问题 responses.setCharacterEncoding("utf-8"); PrintWriter writer = responses.getWriter(); //创建userInfos对象的集合 List<UserInfos> list=new ArrayList<UserInfos>(); //制作数据 UserInfos userInfos1=new UserInfos(); userInfos1.setId("001"); userInfos1.setName("小明"); UserInfos userInfos2=new UserInfos(); userInfos2.setId("002"); userInfos2.setName("小红"); UserInfos userInfos3=new UserInfos(); userInfos3.setId("003"); userInfos3.setName("小黑"); //添加数据 list.add(userInfos1); list.add(userInfos2); list.add(userInfos3); //将List转换为JSON JSONArray jsonArray=JSONArray.fromObject(list); //写入到前台 writer.write(jsonArray.toString()); writer.flush(); writer.close(); }catch (Exception e) { // Todo: handle exception } }


JS

function ajaxJson(){ $.ajax({ type:"post",url:"myAjaxAction.action",async:true,success:function(data) {//获取返回值 alert(data); var obj=eval("("+data+")"); alert(obj); for(var i in obj){ alert("ID:"+obj[i].id+"\nName:"+obj[i].name); } },error:function(e) { alert("验证失败!"); } }); }


HTML

<input type="button" value="测试JSON" onclick="ajaxJson()"/>

Ajax使用Action中返回的Json数据的简单实例(一)

Ajax使用Action中返回的Json数据的简单实例(一)

实现原理：从Action中返回JSON格式的字符串，在ajax中获取到data,并将其转换成js的JSON数据，然后遍历

注：亦可在Java代码就转换为JSON格式，使用JSONArrayjsonArray=JSONArray.fromObject(string)，写write(jsonArray.toString());这时在JS里就不需要使用eval()转换直接遍历

Struts.xml

<action name="myAjaxAction"method="myAjaxAction"><interceptor-ref name="mystack" /></action>


Action方法

public void myAjaxAction(){ try{ HttpServletResponse responses = ServletActionContext.getResponse(); responses.setCharacterEncoding("utf-8"); PrintWriter writer = responses.getWriter(); //设置JSON数据，\"是转义符，实际内容为：[{name:"张三",age:12},{name:"李四",age:11},{name:"王五",age:13},{name:"小六",age:14}]； String string="[{name:\"张三\",{name:\"李四\",{name:\"王五\",{name:\"小六\",age:14}]"; writer.write(string); writer.flush(); writer.close(); }catch (Exception e) { // Todo: handle exception } }


HTML

<input type="button" value="测试JSON" onclick="ajaxJson()"/>


JS代码

function ajaxJson(){ $.ajax({ type:"post",url:"myAjaxAction.action",async:true,success:function(data) { var obj=eval("("+data+")");//将数据转换成json类型 for(var i in obj){//遍历Json数据 alert("姓名:"+obj[i].name+" 年龄:"+obj[i].age ); } },error:function(e) { alert("验证失败!"); } }); }

ajax动态加载json数据并解析

ajax动态加载json数据并解析

效果图

jsp代码

<form >
            姓名：<input name="name" type="text"/>
            年龄：<input name="age" type="text"/>
            <input type="button" class="get" value="get提交"/>
            <input type="button"  class="post" value="post提交"/>
            <input type="button" class="ajax" value="ajax提交"/>
            </form>
            <div id="Box"></div>

servlet代码

//get
public void doGet(HttpServletRequest request,HttpServletResponse response)
            throws servletexception,IOException {

        response.setContentType("text/html");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        if (name == null || name == "") {
            name = "测试名字admin";
        }

        if (age == null || age == "") {
            age = "测试年龄100";
        }
        user user = new user(1,name,age);
        PrintWriter out = response.getWriter();

        JSONObject jsonObj = JSONObject.fromObject(user);

        out.print(jsonObj);

        out.flush();
        out.close();
    }
//post
public void doPost(HttpServletRequest request,IOException {

        // response.setContentType("text/html");

        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        String name = request.getParameter("name");
        if (name == null || name == "") {
            name = "测试名字admin";
        }
        String age = request.getParameter("age");
        if (age == null || age == "") {
            age = "测试年龄100";
        }
        user user = new user(1,age);
        PrintWriter out = response.getWriter();

        JSONObject jsonObj = JSONObject.fromObject(user);

        out.print(jsonObj);

        out.flush();
        out.close();
    }

JS核心代码

<script type="text/javascript"> //get $(document).ready(function() { $('form .get').click(function() { $.get('ajaxServlet',function(response,status,xhr){ var dataObj = eval("(" + response + ")"); $("#Box").html(response); alert(dataObj.name); }); }); //post $('form .post').click(function() { $.post('ajaxServlet',xhr){ var dataObj = eval("(" + response + ")"); $("#Box").html(response); }); }); //ajax $('form .ajax').click(function() { alert($("[name='name']").val()); $.ajax({ type:'get',url:'ajaxServlet',data:{ name:$("[name='name']").val(),age:$("[name='age']").val() },success:function(response,xhr){ $("#Box").html(response);} }); }); }); </script>

我们今天的关于ajax和第一篇将json数据提交到action并解析的分享就到这里，谢谢您的阅读，如果想了解更多关于AJAX MVC 服务器返回Json数据，客户端获取Json数据、Ajax使用Action中返回的Json数据的完整实例(二)：action内将一个实体对象转化为json并返回、Ajax使用Action中返回的Json数据的简单实例(一)、ajax动态加载json数据并解析的相关信息，可以在本站进行搜索。

本文标签：

上一篇Extjs使用Ext.ajax时报错：too much recursion（ext.ajax.timeout）

下一篇Ajax+juqery+php 之两个select option控件传值（ajax传两个参数到controller）

相关文章