Ajax和Action之间Json数据的交互--包含List数据传输

最新推荐文章于 2021-08-06 20:33:26 发布

Damon-Da

最新推荐文章于 2021-08-06 20:33:26 发布

阅读量2.4k

点赞数

分类专栏： javase javaee 文章标签： ajax action list

本文链接：https://blog.csdn.net/dada111111111/article/details/51511522

版权

javase 同时被 2 个专栏收录

13 篇文章 1 订阅

订阅专栏

javaee

9 篇文章 0 订阅

订阅专栏

怕以后忘记，作为笔记，解释包含在代码中。

注：此处用的 Jquery 的AJAX

1. 传递基本的数据类型

UserAction

package action;

import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import com.opensymphony.xwork2.ActionSupport;

public class UserAction extends ActionSupport{
    /**
        此处的属性值，与前台ajax的请求参数一致，参数是通过structs默认的拦截器将请求参数 进行拦截并通过set方法传递进来。
    */
    private String value;//后台的属性与ajax发送的数据名一致 有set get
    private String url;//返回的值 有get方法--用于ajax获取
    public String getValue() {
        return value;
    }
    public void setValue(String value) {
        this.value = value;
    }
    public String test1(){
        url="test1";
        System.out.println(value);
        return SUCCESS;
    }

structs2.xml
所谓的JSON就是一种key -value形式的数值格式，一种轻量级的数据交换格式。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
    <package name="actions" namespace="/" extends="json-default">
    <action name="user" class="action.UserAction" method="test1">
        <!-- <result name="success">/1.jsp</result> -->
        <!--在stucts2中，type="json"是用来做ajax请求的，所以根本没有跳转页面，Json是一种数据格式，这个result会将action中的所有变量 转成json返回页面 -->
        <result name="success" type="json">  

         </result>
    </action>
    </package>
</struts>

jsp:代码–

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>
    <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            $("#button").click(function(){
                 $.ajax({
                     type: "GET",
                     //url指明传递参数到哪个action
                     url: "user.action",
                     data: {value:"msg"},//形式为key-value
                     dataType: "json",//数据类型
                     success: function(data){
                     //data是后台返回Json 数据的一个属性集合，要访问返回的url必须通过data.url访问。
                                alert(data.url);

                          },
                     error: function(err) {
                                alert(err);
                        }

                     });
             });
            });
    </script>
  </head>

  <body>
    <input id="button" type="button" value="图书" >               
  </body>
</html>

结果：
后台收到数据：
这里写图片描述

前台显示后台返回的数据
这里写图片描述

2. 传递实体对象

基本如上：

public class OrderAction extends ActionSupport {
    private Order order = new Order();

    public execute(){
        //这里对order进行内容赋值
        //order.setOrderName().......;
        return success;
    }
}

xml文件返回与上述基本类型一致，指明action的类及方法，返回json类型即可。

ajax:

 $.ajax({
                     type: "GET",
                     url: "user.action",
                     data: {value:"msg"},//形式为key-value
                     dataType: "json",
                     success: function(data){
                  //通过访问到order实体，再访问里面的属性值
                        alert(data.order.orderName);

                          },
                     error: function(err) {
                                alert(err);
                        }

                     });
             });

3. 访问List

前台：
list通过Jquery循环读取

$.ajax({
                     type: "GET",
                     url: "getproducts.action",
                     data: {msg:"时尚男装"},
                     dataType: "json",
                     success: function(data){
                     //alert("返回成功");
                        //这里 要为data.list  data是一个object
//data.list为循环的对象,index为循环的下标，content为每次循环的对象。              $.each(data.list,function(index,content){
                     alert(content.name);                     
                            });
                          },
                     error: function(err) {alert("erro");}
                     });
                     });

xml文件与例子1一样。

后台：

private List<Products> list;//用于返回的List数组、

set方法。。。。

get方法。。。。

Damon-Da

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录