碼上歡樂
相關內容    簡體    繁體

JSP+AJAX獲取或者傳遞JSON對象以及參數

本文轉載自   查看原文   2016-01-14 13:13   3316    JAVA WEB

commodityList.jsp

第一步：創建 名為"ajax" 的 Java Web項目。

 

第二步：加入struts2的jar包，這里需要四個包 freemarker.jar  ognl.jar  struts2-core.jar  commons-fileupload.jar  commons-io.jar   xwork-core-2.1.6.jar（這個包加上版本號，是因為下文要提到它），這六個包是struts必須依賴的jar包，什么好說的。

 

第三步：修改 web.xml 加入 struts的過濾器，代碼如下：

[xhtml] view plaincopy

  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <web-app version="2.5"   
  3.     xmlns="http://java.sun.com/xml/ns/javaee"   
  4.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   
  5.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   
  6.     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">  
  7.       
  8.     <filter>  
  9.         <filter-name>struts2</filter-name>  
  10.         <filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>  
  11.     </filter>  
  12.     <filter-mapping>  
  13.         <filter-name>struts2</filter-name>  
  14.         <url-pattern>/*</url-pattern>  
  15.     </filter-mapping>  
  16.       
  17.       
  18.       
  19.   <welcome-file-list>  
  20.     <welcome-file>index.jsp</welcome-file>  
  21.   </welcome-file-list>  
  22. </web-app>  

 

第四步：加入json的包，這里需要兩個：json-lib.jar  jsonplugin.jar 這里要注意很重要的一點，因為json大量引用了Apache commons的包，所以這里要一並加入，需要的commons包共4個，除了commons的包外，還需要引入一個 ezmorph的包，所以這一步一共要引入7個包，列出如下：commons-collections.jar  commons-lang.jar  commons-beanutils.jar  commons-logging.jar  ezmorph.jar 再加上json的兩個包共七個，一次性加入。

 

第五步：寫后台處理AjaxLoginAction.action，內容如下：

[java] view plaincopy

  1. package qy.test.action;  
  2.   
  3. import java.util.HashMap;  
  4. import java.util.Map;  
  5.   
  6. import net.sf.json.JSONObject;  
  7.   
  8. import com.opensymphony.xwork2.ActionSupport;  
  9.   
  10. public class AjaxLoginAction extends ActionSupport {  
  11.   
  12.     // 用戶Ajax返回數據  
  13.     private String result;  
  14.   
  15.     // struts的屬性驅動模式，自動填充頁面的屬性到這里  
  16.     private String loginName;  
  17.     private String password;  
  18.   
  19.     @Override  
  20.     public String execute() {  
  21.   
  22.         // 用一個Map做例子  
  23.         Map<String, String> map = new HashMap<String, String>();  
  24.   
  25.         // 為map添加一條數據，記錄一下頁面傳過來loginName  
  26.         map.put("name", this.loginName);  
  27.   
  28.         // 將要返回的map對象進行json處理  
  29.         JSONObject jo = JSONObject.fromObject(map);  
  30.   
  31.         // 調用json對象的toString方法轉換為字符串然后賦值給result  
  32.         this.result = jo.toString();  
  33.   
  34.         // 可以測試一下result  
  35.         System.out.println(this.result);  
  36.   
  37.         return SUCCESS;  
  38.   
  39.     }  
  40.   
  41.     //getter  setter 方法省略  
  42. }  

 

第六步：寫前台index.jsp，注意加入 jquery的js文件 內容如下：

[javascript] view plaincopy

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5.     <head>  
  6.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  7.         <mce:script type="text/javascript" src="js/jquery-1.3.2.min.js" mce_src="js/jquery-1.3.2.min.js"></mce:script>  
  8.         <mce:script type="text/javascript"><!--  
  9.     $(document).ready( function() {  
  10.           
  11.         //使用 Ajax 的方式 判斷登錄  
  12.         $("#btn_login").click( function() {  
  13.               
  14.             var url = 'ajaxLogin.action';  
  15.               
  16.             alert("===");  
  17.               
  18.             //獲取表單值，並以json的數據形式保存到params中  
  19.             var params = {  
  20.                 loginName:$("#loginName").val(),  
  21.                 password:$("#password").val(),  
  22.             }  
  23.             //使用$.post方式      
  24.             $.post(  
  25.               
  26.                 url,        //服務器要接受的url  
  27.                   
  28.                 params,     //傳遞的參數       
  29.                   
  30.                 function cbf(data){ //服務器返回后執行的函數 參數 data保存的就是服務器發送到客戶端的數據  
  31.                   
  32.                     //alert(data);  
  33.                     var member = eval("("+data+")");    //包數據解析為json 格式    
  34.               
  35.                     $('#result').html("歡迎您：  "+member.name);  
  36.                       
  37.                 },   
  38.                   
  39.                 'json'  //數據傳遞的類型  json  
  40.               
  41.             );  
  42.           
  43.         });  
  44.           
  45.     });  
  46. // --></mce:script>  
  47.     </head>  
  48.     <body>  
  49.         <span>用戶名：</span>  
  50.         <input type="text" id="loginName" name="loginName">  
  51.         <br />  
  52.   
  53.         <span>密碼：</span>  
  54.         <input type="password" name="password" id="password">  
  55.         <br />  
  56.   
  57.         <input type="button" id="btn_login" value="Login" />  
  58.         <p>  
  59.             這里顯示ajax信息：  
  60.             <br />  
  61.             <span id="result"></span>  
  62.         </p>  
  63.     </body>  
  64. </html>  

 

第七步：在src目錄下加入struts.xml，並配置相應的xml文件，為ajax請求提供數據。代碼如下：

[xhtml] view plaincopy

  1. <?xml version="1.0" encoding="UTF-8" ?>  
  2. <!DOCTYPE struts PUBLIC  
  3.     "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"  
  4.     "http://struts.apache.org/dtds/struts-2.0.dtd">  
  5.   
  6. <struts>  
  7.   
  8.     <package name="ajax" extends="json-default">  
  9.         <action name="ajaxLogin" class="qy.test.action.AjaxLoginAction">  
  10.   
  11.             <!-- 返回類型為json 在sjon-default中定義 -->  
  12.             <result type="json">  
  13.   
  14.                 <!-- root的值對應要返回的值的屬性 -->  
  15.                 <!-- 這里的result值即是 對應action中的 result -->  
  16.                 <param name="root">result</param>  
  17.             </result>  
  18.         </action>  
  19.     </package>  
  20.   
  21. </struts>  

 

第八步：如果第四步沒有加入commons-logging.jar包，這里要記得加入

 

第九步：發布運行。很不幸，你會發現一個錯誤，

java.lang.ClassNotFoundException: com.opensymphony.xwork2.util.TextUtils:

這是struts的版本錯誤，因為用的xwork2.1.6-core.jar中不存在TextUtils類，這里把 xwork2.1.2-core.jar也加到classpath中，xwork2.1.2-core.jar中包含這個東西，我們用的是xwork2.1.6的jar，當要用到TextUtils時，就去xwork2.1.2-core.jar中找。

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Jsp頁面get方式傳遞和獲取參數 js使用ajax向后台傳遞json對象 SpringBoot系列---【get請求如何傳遞json對象的參數？】 postman 傳遞json的參數里面帶了List對象 jsp定義 ，JSON對象 jsp 頁面間傳遞參數 WebApi傳遞JSON參數 ajax post 傳遞數組參數 ajax get方式傳遞參數 ajax post方式傳遞參數
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM