第一种是原始的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，可能引起了冲突。

ajax异步提交的两种方法的更多相关文章

  1. js阻止表单提交的两种方法

    下面直接看代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. ajax获取值的两种方法

    详细连接https://blog.csdn.net/a1102325298/article/details/80785143 ajax获得表单值的俩种方法 2018年06月23日 17:12:02 延 ...

  3. ajax 请求数据的两种方法

    实现ajax 异步访问网络的方法有两个.第一个是原始的方法,第二个是利用jquery包的 原始的方法不用引入jquery包,只需在html中编写script 片段 这里我演示的是一个传递参数查询的例子 ...

  4. vue 异步提交php 两种方式传值

    1.首先要在php的入口文件写上一条代码,允许异步提交 header("ACCESS-CONTROL-ALLOW-ORIGIN:*"); 2.在vue有两种方式将数据异步提交到ph ...

  5. js防止表单重复提交的两种方法

    第一种:用flag标识,下面的代码设置checkSubmitFlg标志: 复制代码代码如下: <script language=""javascript"" ...

  6. 使用JS和JQuery 阻止表单提交的两种方法

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  7. Ajax请求数据的两种方式

    ajax 请求数据的两种方法,有需要的朋友可以参考下. 实现ajax 异步访问网络的方法有两个.第一个是原始的方法,第二个是利用jquery包的 原始的方法不用引入jquery包,只需在html中编写 ...

  8. ASP.NET MVC 实现AJAX跨域请求的两种方法

    通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据的加载,例如Google. 在ASP.NET MVC 框 ...

  9. 使用js提交form表单的两种方法

    提交form表单的时候瑶族一些简单的验证,验证完后才能提交,避免无效提交. 1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在前端页面写:有两种方法,一种是用sub ...

随机推荐

  1. sphinx索引分析——文件格式和字典是double array trie 检索树，索引存储 – 多路归并排序，文档id压缩 – Variable Byte Coding

    1 概述 这是基于开源的sphinx全文检索引擎的架构代码分析,本篇主要描述index索引服务的分析.当前分析的版本 sphinx-2.0.4 2 index 功能 3 文件表 4 索引文件结构 4. ...

  2. Ingress 记萌新的第一次连多重（xjbl）

    之前为了升七,ArtanisWei学长告诉我可以去紫金园雕塑[这是什么地方啊],顺带靠卖萌骗了一桶key 于是屁颠屁颠的跑去按照群里攻略开始连多重[馒头 by handsomepeach],连了一百年 ...

  3. 2013年度最强AngularJS资源合集

    原文在这里 2013年度最强AngularJS资源合集 来看我的视频教程,国内第一款完整的AngularJS视频教程http://www.imooc.com/learn/156 司徒正美 写道 htt ...

  4. asp.net c#过滤html代码,净化DIV SPAN等

    public static string GetSafeHtml(string val) { if (string.IsNullOrEmpty(val)) { return string.Empty; ...

  5. Kettle6.0安装及问题总结-白痴教程

    1.安装JDK 配置java环境变量 2.安装KETTLE: 官方下载地址:http://community.pentaho.com/projects/data-integration/ 下载完后,解 ...

  6. 关于RSA加密算法的长度限制问题

    RSA是常用的非对称加密算法.近来有学生在项目中使用System.Security类库中的RSA加密算法时,出现了“不正确的长度”,这实际上是因为待加密的数据超长所致..net Framework中提 ...

  7. linux 安装mysql两种方式

    yum -y install gcc gcc-c++ ncurses-devel cmake  bison   zlib    zlib-devel libxml  openssl   dtrace ...

  8. 【Python扩展阅读【转】EasyGui 学习文档【超详细中文版】】

    翻译改编自官方文档:http://easygui.sourceforge.net/tutorial/index.html 翻译改编者:小甲鱼,本文欢迎转载,转载请保证原文的完整性! 演示使用 Pyth ...

  9. （原创）如何使用selenium 驱动chrome浏览器并且打开方式为手机模式-转载请注明出处

    随着移动设备使用率的不断增加,移动页面的测试也变得越来越重要. 对于互联网公司M站的测试,如果不通过专用的appium等移动端测试工具是否还有方便快捷的办法呢?答案当然是有啊. 使用chrome dr ...

  10. js初学者的div移动

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...