使用jquery Ajax的post方法或直接使用jqery ajax请求action 得到返回的json数据

最新推荐文章于 2022-05-18 23:30:00 发布

码农小旋风

最新推荐文章于 2022-05-18 23:30:00 发布

阅读量7k

点赞数

分类专栏：前台交互文章标签： jquery ajax json struts2 ajax直接请求与post提交

本文链接：https://blog.csdn.net/u010785969/article/details/37736343

版权

前台交互专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在初步掌握了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;
	}
	@Override
	public 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>

结果：