HTML5 and Mobile Web: Ajax asynchronous submit the form

table of Contents:

JQM_index2.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE>
<html>
<head>
<link rel="stylesheet"
	href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script
	src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
	    $(document).ready(function () {
			$("#tj").click(function(){
					cache: false,
					$.ajax({
					  type: "POST",
					  url: "demo1.action",
					  //将表单内容序列化成一个字符串,如下:username=wwc&password=wwc,如果是post请求,那么这串字符串就以请求体的方式传递给后端action     
					  data: $('#form1').serialize(),
					  datatype:"json",
					  success:function(data){
					  		$("#showmsg").html(data);					  
					  	 	$.mobile.changePage("#t2"); 
					  }
			  	});
			});
 
        });
 
 
</script>
<title>JQM测试</title>
</head>

<body>
	<div id="t1" data-role="page">
		<div data-role="header">
			<h1>表单提交</h1>
		</div>

		<div data-role="main" class="ui-content">
			<form action="" method="post" id="form1">
				请输入测试内容:<br />
				<textarea name="helloInfo" rows="4" style="width:400px"></textarea>
				<br />
					<input id="tj" type="button" data-inline="true" value="提交">
			</form>
		</div>
	</div>
	<div id="t2" data-role="page">
		<div data-role="header">
			<h1>表单显示</h1>
		</div>

		<div data-role="content">
			<span id="showmsg"></span>
		</div>
	</div>
</body>
</html>

Success.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
   
  </head>
  
  <body>
    <h2>信息: <s:property value="helloInfo"/> </h2>
   
  </body>
</html>

web.xml / struts.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://xmlns.jcp.org/xml/ns/javaee"
	xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
	id="WebApp_ID" version="3.1">
	<display-name>ex_3</display-name>
	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
		<welcome-file>default.html</welcome-file>
		<welcome-file>default.jsp</welcome-file>
	</welcome-file-list>
	<filter>
		<filter-name>struts2</filter-name>
		<filter-class>org.apache.struts2.dispatcher.filter.StrutsPrepareAndExecuteFilter</filter-class>
	</filter>
	<filter-mapping>
		<filter-name>struts2</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>
</web-app>
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.5//EN" "http://struts.apache.org/dtds/struts-2.5.dtd">
<struts>
	<constant name="struts.i18n.encoding" value="UTF-8"></constant>
	<package name="ActionPackage" namespace="/"
		extends="struts-default,json-default">
		<action name="demo1" class="ActionPackage.HelloAction">
			<!-- <result name="success">/Hello.jsp</result> -->
			<result name="success" type="json">
				<param name="root">result</param>
			</result> 
		</action>
	</package>

</struts>    

HelloAction

package ActionPackage;

public class HelloAction {
	private String helloInfo;
	private String result;
	
	public String getResult() {
		return result;
	}
	public void setResult(String result) {
		this.result = result;
	}
	public String getHelloInfo()
	{
		return helloInfo;
	}
	public void setHelloInfo(String Info)
	{
		this.helloInfo = Info;
	}
    public String execute(){
    	System.out.println(helloInfo);
    	result=helloInfo;
        return "success";
    }
}

 

Published 349 original articles · won praise 161 · views 190 000 +

Guess you like

Origin blog.csdn.net/qq_42192693/article/details/103250426