第一种是原始的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. GitHub的使用之新建与更新代码

    一.新建仓储:注册GitHub后你就会有0.3G的免费空间,不过只能创建公开项目,这也满足代码分享的目的,我最喜欢的倒是它的代码展示方式,可以直接浏览你的代码,代码是经过高亮.添加行号处理过的,十分漂 ...

  2. PHP redis 批量操作

    参考网站 phpredis扩展 :https://github.com/phpredis/phpredis#pconnect-popen 命令参考:http://doc.redisfans.com   ...

  3. Oracle逻辑备份与恢复

      1. 备份的类型 按照备份方式的不同,可以把备份分为两类: 1.1 逻辑备份:指通过逻辑导出对数据进行备份.将数据库中的用户对象导出到一个二进制文件中,逻辑备份使用导入导出工具:EXPDP/IMP ...

  4. PDF 补丁丁 0.5.0.2691 发布（替换字库新增字符映射功能）

    新版本在替换 PDF 字体功能中增加了替换字符的功能. 某些 PDF 文档可能由于编码错误的问题,复制出来的文本是乱码. 对于这种文档,可以使用此功能将错误的编码映射到正确的字符上,从而实现修复文档的 ...

  5. 怎么把Windows主机上的目录共享到Ubuntu上

    使用Oracle VM VirtualBox在Windows主机上创建了一台Ubuntu虚拟机,怎么把宿主机上的目录共享到Ubuntu上,可使用以下方法: eg.把Windows主机上D盘里的test ...

  6. This TableLayout layout or its LinearLayout parent is possibly useless

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  7. Struts2 Result 类型和对应的用法详解

  8. [高斯消元] POJ 2345 Central heating

    Central heating Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 614   Accepted: 286 Des ...

  9. win8.1安装Matlab7.0的兼容问题

     Matlab7.0安装完成后打开就立即关闭,此时右键点击MATLAB7.0快捷方式-"用图形处理器运行"-"更改默认图形处理器",将"集成图形&qu ...

  10. html5移动web开发笔记（一）Web 存储

    localStorage - 没有时间限制的数据存储 localStorage 方法 localStorage 方法存储的数据没有时间限制.第二天.第二周或下一年之后,数据依然可用. 用户访问页面的次 ...