Struts2 ajax json小例子


1:首先要解決jar包的問題,我最近一直用maven搭建項目,所以把pom.xml復制到這。

要有struts2的核心包,struts2和Json整合的包,以及json lib。剛才轉載了一篇解決json lib老是報錯的博客,問題完美解決。

    <dependencies>
        <dependency>
            <groupId>org.apache.struts</groupId>
            <artifactId>struts2-json-plugin</artifactId>
            <version>2.3.28.1</version>
        </dependency>
        <dependency>
            <groupId>net.sf.ezmorph</groupId>
            <artifactId>ezmorph</artifactId>
            <version>1.0.6</version>
        </dependency>

        <dependency>
            <groupId>net.sf.json-lib</groupId>
            <artifactId>json-lib</artifactId>
            <version>2.2.2</version>
            <classifier>jdk15</classifier>
        </dependency>

        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.0.1</version>
            <!-- 只在編譯時和測試時運行 -->
            <scope>provided</scope>
        </dependency>
        <!-- Struts2 -->
        <dependency>
            <groupId>org.apache.struts</groupId>
            <artifactId>struts2-core</artifactId>
            <version>2.3.24</version>
        </dependency>
    </dependencies>

2:login.jsp

先看看寫好的表單,ajax一會再說吧。

<%@ 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>Login Page</title>
<script type="text/javascript" src="jquery-1.12.2.min.js"></script>
</head>
<body>
    <form action="#" method="post">

        ID: <input type="text" name="id" id="id" />
        <br/>
        Password:<input type="text" name="name" id="name"/>
        <br/>
        <input type="submit" value="Submit" id="submit" name="submit"/>
        
    </form>
    <script>

        function login(){
            var $btn = $("#submit");
            $btn.bind("click",function(){
                $.ajax({
                    type:"post",
                    url:"json.action",
                    data:{
                        id : $("#id").val(),
                        name : $("#name").val()
                    },
                    dataType:"json",
                    success:function(data){
                        var obj = eval ("(" + data + ")");
                        alert(obj.id);
                    },
                    error:function(){
                        alert("失敗");
                    }
                });
            });
        };
        $(document).ready(function(){
            login();
        });
    </script>
    
</body>
</html>

3:JsonAction.

在這里我們采取模型驅動的方式獲取表單傳遞過來的值,然后在后台輸出一下,當然我重寫了Student的toString方法,Student類就不再展示了。

我們在action里創建了一個map,map是一個鍵值對的形式,Map<String,Object>,拋開Struts2不談,json也是一個鍵值對形式,JSON 數據的書寫格式是:名稱/值對。

我們可以用JsonObject.fromObject()方法創建一個JSONObject對象 

    public static JSONObject fromObject(Object object)
     {
       return fromObject(object, new JsonConfig());
     }

源碼在這,明顯是個static方法,我們用它獲取對象。

然后我們把這個對象轉換成字符串存到了一個變量中。我們可以在后面的struts.xml中看到這個字符串變量有什么用。

package com.oa.action;

import java.util.HashMap;
import java.util.Map;
import com.oa.entity.Student;
import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.ModelDriven;

import net.sf.json.JSONObject;

public class JsonAction extends ActionSupport implements ModelDriven<Student> {
    private static final long serialVersionUID = 1L;
    private Student student = new Student();
    private String result;

    public String getResult() {
        return result;
    }

    public void setResult(String result) {
        this.result = result;
    }

    /**
     * 
     * 處理ajax請求
     * 
     * @return SUCCESS
     * 
     */
    @Override
    public String execute() {

        try {
            System.out.println(student);

            Map<String, Object> info=new HashMap<String,Object>();
            info.put("id", student.getId());
            info.put("name", student.getName());
            JSONObject object=JSONObject.fromObject(info);
            result=object.toString();
            

        } catch (Exception e) {

            e.printStackTrace();

        }
        return SUCCESS;
    }

    @Override
    public Student getModel() {
        if (student == null) {
            student = new Student();
        }
        return student;
    }

}

4:struts.xml

有幾點是必須的,result的type是Json,有點像之前用的struts2的文件下載,type就說stream,我們能看到action里的字符串變量寫在這里。我們把這個result返回給前端頁面,當然,別忘記result的setter getter方法。

        <action name="json" class="com.oa.action.JsonAction">
            <result type="json">
                <param name="root">
                    result
                </param>
            </result>
        </action>

5:ajax

用的是jquery的ajax,要導入jquery的js文件,我用的是jquery-1.12.2.min.js。當然還有別的版本,用哪個都可以,去http://jquery.com/download/下載或者百度都可以。

url就說我們要提交到的action。data是要傳遞的參數,這里的id  name和我實體類Student的屬性是對應的。如果能正確返回,就執行success后面的方法,如果失敗了,就執行error后面的方法。

data是一個字符串,因為我們返回的是result就說一個字符串,不過這個字符串是由JsonObject對象轉換來的。

var obj = eval ("(" + data + ")");是用Javascript解析器,來解析Json文本,有興趣可以看看http://www.w3school.com.cn/json/json_eval.asp,這里有詳細介紹。我只想說Json也是鍵值對形式。我們可到了obj,然后就跟map差不多,你用key就可以得到value。obj.id就可以得到我們輸入的id
$.ajax({
                    type:"post",
                    url:"json.action",
                    data:{
                        id : $("#id").val(),
                        name : $("#name").val()
                    },
                    dataType:"json",
                    success:function(data){
                        var obj = eval ("(" + data + ")");
                        alert(obj.id);
                    },
                    error:function(){
                        alert("失敗");
                    }
                });

6:頁面效果

然而,我發現個問題,在Eclipse 里面沒問題,能正常運行,在chrome里卻不行,我又在搜狗里面試了試,也是可以的。

看來得研究研究為什么不能再chrome中運行了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM