ajax异步提交的两种方法

时间：2021-08-07 22:57:21
ajax异步提交的两种方法

第一种是原始的ajax，第二种是在jQuery中使用ajax。这是我为测试两种提交方法而写的一段代码。

1.struts.xml

     <package name="json" extends="json-default">
         <action name="books" class="com.huawei.struts.BooksAction">
             <result type="json"></result>
         </action>
     </package>

2.action.java

 package com.huawei.struts;

 import java.util.ArrayList;
 import java.util.Iterator;
 import java.util.List;

 import com.opensymphony.xwork2.ActionSupport;

 public class BooksAction extends ActionSupport {
     private static final long serialVersionUID = 1L;
     private String department;
     private ArrayList<Book> bookList;    

     public String getDepartment() {
         return department;
     }
     public void setDepartment(String department) {
         this.department = department;
     }
     public String execute() {
         if(department.equals("huawei")){
             setBookList(GetBooks.getBookInfo());
         }
         return SUCCESS;
     }
     public ArrayList<Book> getBookList() {
         return bookList;
     }
     public void setBookList(ArrayList<Book> bookList) {
         this.bookList = bookList;
     }
 }

3.jsp

 <%@ page contentType=" text/html; charset=UTF-8"%>
 <%@ taglib prefix="s" uri="/struts-tags"%>
 <%@ page language="java" import="com.huawei.struts.*"%>
 <html>
 <head>
 <title>Hello World!</title>
 <script type="text/javascript" src="js/jquery/jquery-1.8.0.js"></script>
 </head>
 <body>
     <h2>图书查询</h2>
     <form>
         <input type="button" value="查询" onclick="lookup()" />
     </form>
     <div id="book"></div>

     <script type="text/javascript">
         function callbackFun(json) {
             var nbook = json.bookList.length;
             var str = "";
             for ( var i = 0; i < nbook; i++) {
                 var bookNum = json.bookList[i].num;
                 var bookName = json.bookList[i].name;
                 str += ("bookNum:" + bookNum + "<br/>" + "bookName:" + bookName + "<br/>");
                 var nchap = json.bookList[i].chapters.length;
                 for ( var j = 0; j < nchap; j++) {
                     var chapterNum = json.bookList[i].chapters[j].num;
                     var chapterName = json.bookList[i].chapters[j].name;
                     str += ("chapterNum:" + chapterNum + "<br/>"
                             + "chapterName:" + chapterName + "<br/>");
                 }
             }
             $("#book").html(str);
         }

         function lookup() {
             /*
             //1.原始的方式
             var xmlhttp;
             if (window.XMLHttpRequest) {
                 xmlhttp = new XMLHttpRequest();
             } else {
                 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
             }

             xmlhttp.open("GET", "books.action?department=" + "huawei", false);
             xmlhttp.send();
             var text = xmlhttp.responseText;
             var json = eval("(" + text + ")");
             callbackFun(json);
             */
             //2.JQuery的方式
             var url = 'books.action';
             var param = {
                 department : 'huawei'
             };
             jQuery.get(url, param, callbackFun, 'json');
         }
     </script>
 </body>
 </html>

4.查询打印结果：

图书查询

bookNum:1
bookName:《Java宝典》
chapterNum:1
chapterName:Java概况
chapterNum:2
chapterName:Java语法
bookNum:2
bookName:《C++详解》
chapterNum:1
chapterName:C++概况
chapterNum:2
chapterName:C++语法
※ps:
    如果想将JSON对象转换成字符串可以包含脚本json.js包，然后将
    var str = JSON.stringify(jsonObj);
    不过我用第二种方式测试时未通过，原因是引进了json.js，可能引起了冲突。

相关文章