第一种是原始的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. YY前端课程5-6

    第五次课内容: 1. 要注意标签的层次,运用缩进indent,使HTML结构清晰,增加可读性accessible 2. HTML布局网页,CSS显示样式(CSS是用来美化HTML标签的) 3. 开放标 ...

  2. Python笔记总结week3

    Set集合: 无序,不重复的序列 a. 创建 se = {"123,"456" } print(type(se)) #创建集合方式 s1 = se = {"12 ...

  3. ajax 参数有中文

    虽然很少会有这种情况,但是既然遇到了就记录一下.一般发请求的话如下 $.ajax({ url: "", type: 'get', data: {'name': val}, data ...

  4. MVC5+EF6 入门完整教程十

    本篇是第一阶段的完结篇. 学完这篇后,你应该可以利用MVC进行完整项目的开发了. 本篇主要讲述多表关联数据的更新,以及如何使用原生SQL. 文章提纲 多表关联数据更新 如何使用原生SQL 总结 多表关 ...

  5. [原创]C#应用WindowsApi实现查找(FindWindowEx)文本框(TextBox、TextEdit)。

    /// <summary> /// 获取文本框控件 /// </summary> /// <param name="hwnd">文本框所在父窗口 ...

  6. qt-creator astyle Peizhi

    --style=ansi -s4 --pad-oper -S -N -L -m0 --add-brackets -M40 --suffix=none --convert-tabs %{CurrentD ...

  7. scalac 学习

    val logEnable = false def log(msg: => String) = if (logEnable) println(msg) val MSG = "progr ...

  8. linux下编译出现空间不足解决办法

    linux下编译出现空间不足解决办法 编译内核出现问题: AS      .tmp_kallsyms1.o .tmp_kallsyms1.S:2: fatal error: when writing ...

  9. Android中什么时候使用get和post 以及他们的优缺点！！

    1. get是从服务器上获取数据,post是向服务器传送数据.2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到.post是通过H ...

  10. Ubuntu下Nutch1.2的使用

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeMAAABpCAIAAACGSdxlAAAAA3NCSVQICAjb4U/gAAAgAElEQVR4Xu ...