第一种是原始的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. css学习归纳总结（一） 转

    原文地址:CSS学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00; } 3.属性 ...

  2. 我的毕业设计——基于安卓和.NET的笔记本电脑远程控制系统

    手机端: 电脑端:    答辩完成后会开放代码.

  3. Centos 6.5 把自带python 2.6.6， 升级到 2.7

    http://blog.csdn.net/jcjc918/article/details/11022345

  4. 深度讲解VIEWPORT和PX是什么？移动端单位px，em，rem

    刚开始接触移动页面重构,是不是很迷惑应该按照多大的尺寸制作?320.640还是720?按照640的设计稿重构完页面,是不是还需要写其他尺寸来适配不同的屏幕大小?—— 这源于对viewport和px的不 ...

  5. PHP实现微信公众平台开发 全套视频资源下载

    好久没有在博客园更新东西了,今天给大家分享一份比较不错的视频学习资源吧. 主要是关于PHP实现微信公众平台开发,  不知道大家对于微信平台的开发有多少了解,那么今天就从基础开始吧,资源目录如下(PS ...

  6. 超酷震撼 HTML5/CSS3动画应用及源码

    HTML5可以制作非常华丽的动画效果,这点通过之前的分享学习我们已经有深刻的了解了,今天我们主要来分享一些HTML5结合CSS3形成的超炫震撼的动画应用以及它们的源代码,真的非常不错. 1.纯CSS3 ...

  7. AJAX需要注意的

    当你写好了与数据库连接的时候,例如这段代码:xmlHttp.open("GET","check.php?user="+url,true); 你不要认为你段代码就 ...

  8. Sublime Text 3 中文乱码的解决方法

    Sublime Text 3 中文乱码表现如下图: 解决方法很简单,三步搞定: 步骤一: 下载ConvertToUTF8,下载地址:http://pan.baidu.com/s/1gd5SWmB 步骤 ...

  9. Bootstrap <基础七>按钮

    任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: 以下样式可用于<a>, <butto ...

  10. 不安装HALCON下安装运行版U盘加密狗驱动

    参考halcon安装指导书 Installation Guide Depending on your operating system, you can install, configure, and ...