在初步掌握了java對象和json的相互轉化之後，今天要學習的就是如何使用ajax來請求action 並且放回json字元，在前台對json資料進行解析。
第一步：使用ajax 的post直接提交，寫一個Post.jsp檔案
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>My JSP 'index.jsp' starting page</title><script type="text/javascript" src="js/jquery-2.0.0.js"></script><script type="text/javascript" src="js/Post.js"> </script> </head> <body> <input type="text" id="name"> <!-- 用來輸入傳遞的參數 --> <input type="button" id="bt" value="SayHello"><br/><!-- 用來提交的按鈕 --> Hello <div id="result"></div><!-- 結果的顯示 --> </body></html>
然後有一個與它對應的js（Post.js）檔案，用來寫post的提交：
$(function(){$("#bt").click(function(){var result=$("#name").val();//使用$.post方式 提交 $.post( "postAction",//指定提交的url {'result':result}, //傳遞的參數 ,使用Struts2 的注入參數的方式（action中有對應的屬性，setter方法） function success(data){ //提交成功之後的回呼函數 alert(data); var r = $.parseJSON(data) ; //包資料解析為json 格式 alert(r.name); $("#result").html(r.name); }, "json" //指定返回的資料為json字串 ); });});
對應的PostAction：
public class PostAction extends ActionSupport {private String result;public String getResult() {return result;}public void setResult(String result) {this.result = result;}@Overridepublic String execute() throws Exception {JSONObject jobject=new JSONObject();//Map<String,Object> map=new HashMap<String,Object>();//map.put("name", result);jobject.element("name", result);result=jobject.toString();return super.execute();}}
Struts設定檔：
?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd"><struts><package name="login" extends="json-default"><action name="postAction" class="edu.hue.jk.action.PostAction"><result type="json"><param name="root">result</param> <!-- root表示返回對象的層級為根部 result是返回結果 --></result></action></package></struts> 結果：
點擊按鈕：
第二步：直接使用ajax請求action：ajax.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="js/jquery-2.0.0.js"></script><script type="text/javascript" src="js/Ajax.js"></script></head><body><input id="name" type="text" ><input type="button" id="bt" value="Ajax請求"><br/>Hello <div id="result"></div></body></html>
Ajax.js:
$(function(){$("#bt").click(function(){var name=$("#name").val();$.ajax({ type: "post", dataType:'json', //接受資料格式 cache:false, data:{"result":name}, url: "ajaxAction", beforeSend: function(XMLHttpRequest){ }, success: function(data){ alert(data); var r = $.parseJSON(data) ; //將字串解析成json對象 $("#result").html(r.name); }, error: function(){ //請求出錯處理 alert("Error!"); } });});});
AjaxAction:
$(function(){$("#bt").click(function(){var name=$("#name").val();$.ajax({ type: "post", dataType:'json', //接受資料格式 cache:false, data:{"result":name}, url: "ajaxAction", beforeSend: function(XMLHttpRequest){ }, success: function(data){ alert(data); var r = $.parseJSON(data) ; //將字串解析成json對象 $("#result").html(r.name); }, error: function(){ //請求出錯處理 alert("Error!"); } });});});
Struts 設定檔：
<package name="login" extends="json-default"><action name="ajaxAction" class="edu.hue.jk.action.AjaxAction"><result type="json"><param name="root">result</param> <!-- root表示返回對象的層級為根部 result是返回結果 --></result></action></package>
結果：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
