ajax交互json数据

最新推荐文章于 2024-10-04 13:18:14 发布

weixin_34162695

最新推荐文章于 2024-10-04 13:18:14 发布

阅读量71

点赞数

文章标签： json 前端 python ViewUI

原文链接：https://my.oschina.net/lcyanxi/blog/720091

版权

2019独角兽企业重金招聘Python工程师标准>>>

html 代码**粗体**
<!DOCTYPE html>
<html>
  <head>
    <title>ajax.html</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript" src="js/jquery-1.10.0.js"></script>
      <script type="text/javascript" src="js/myajax.js"></script>
  </head>
  <body>
  <h3>前端获取服务器端的数据</h3>
         <div id="version_name"><a>版本名称：</a><span></span></div>
         <div id="version_code"><a>当前版本号：</a><span></span></div>
         <div id="version_content"><a>版本内容：</a><span></span></div>
         <div id="version_address"><a>下载地址：</a><span></span></div>   
    <h3>前端传数据到服务器端</h3>
         版本名称： <input type="text" id="name"><br>
         版本号： <input type="text" id="code"><br>
         版本更新内容：<input type="text" id="update_content"><br>
         版本跟新地址：<input type="text" id="update_address"><br>
         <input type="button" value="提交更新" onclick="disp_comfirm()"> <br>
         <div id="result"><a>状态值：</a><span></span></div>
          <div id="message"><a>返回消息：</a><span></span></div>        
  </body>
</html>

myajax.js 代码**粗体**
$(document).ready(function(){
        $.get("findCode",null,function(data){
           $("#version_name").children("span").html(data.version_name);
           $("#version_code").children("span").html(data.version_code);
           $("#version_content").children("span").html(data.version_content);
           $("#version_address").children("span").html(data.version_address);
      });
    });
      function disp_comfirm(){
        var r=confirm("Are you sure update?");
        if(r){
         clickversion();
        }else{
        }
      }
      function  clickversion(){
        var jsons={
         "version_name": $("#name").val(), 
         "version_code": $("#code").val(),
         "version_update_content":$("#update_content").val(),
         "version_update_address":$("#update_address").val()
         };        
         $.ajax({
         type:"POST",
         url:"addAppInfo.action",
        contentType:"application/json",
        data:JSON.stringify(jsons),    
         datetype:"json", 
         success: function (data) { 
         $("#result").children("span").html(data.status);
         $("#message").children("span").html(data.message);
            },
            error: function (data) {
            $("#result").children("span").html(data.error);
            }               
       });  
      }

struts.xml 代码**粗体**
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts  PUBLIC "-//Apache Software Foundation//DTD Struts Configuration2.3//EN"
                         "http://struts.apache.org/dtds/struts-2.3.dtd">
 <struts>
        <constant value="false" name="struts.enable.DynamicMethodInvocation"/>
        <constant value="false" name="struts.devMode"/>
          <package name="default" namespace="/" extends="json-default"><!-- 需要将struts-default改为 -->  
              <action name="addAppInfo"  class="com.cybercar.action.ajaxAction"  method="appInfo">  
              <result type="json"/>
              </action> 
               <action name="findCode"  class="com.cybercar.action.ajaxAction"  method="findAppInfo">  
              <result type="json"/> 
              </action>  
    </package>         
</struts>

服务器端ajaxAction 代码**粗体**
package com.cybercar.action;
import java.io.InputStream;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.io.IOUtils;
import org.apache.struts2.ServletActionContext;
import org.json.simple.JSONObject;
import org.json.simple.parser.JSONParser;
import com.opensymphony.xwork2.ActionSupport;
public class ajaxAction  extends ActionSupport{
	HttpServletRequest req =ServletActionContext.getRequest();
	   HttpServletResponse res=ServletActionContext.getResponse();
	   JSONParser parser=new JSONParser();
	   JSONObject json=new JSONObject();
	   PrintWriter pw = null;
	public void appInfo(){
	  InputStream in;
		try {
		 res.setContentType("text/json; charset=utf-8");
		  pw = res.getWriter();
		   in = req.getInputStream();
		  String results = IOUtils.toString(in, "UTF-8");
	          JSONObject jsonObj = (JSONObject)parser.parse(results);
		  //获得提交过来的json串
		  System.out.println("前端传给服务器端的json数据："+jsonObj);
	         //解析json串的value值
		 String version_code=(String) jsonObj.get("version_code");
		 System.out.println(version_code);
		//返回状态值
		  json.put("status", 1);
	         json.put("message", "恭喜你，添加成功！");
		  pw.write(json.toJSONString());
		} catch (Exception e) {	
		 json.put("error", 0);
		pw.write(json.toJSONString());
		   }
	}
  public void findAppInfo(){
	  res.setContentType("text/json; charset=utf-8");
	  try {
	      pw=res.getWriter();
	      json.put("version_name", "车联网app 1.2.15");
		  json.put("version_code", "1.2.15");
		  json.put("version_content", "一个全新的版本，您值得拥有");
		  json.put("version_address", "http://127.0.0.1/apk");
		  System.out.println("服务器端传给前端的json数据："+json);
		pw.write(json.toJSONString());
	} catch (Exception e) {
		json.put("status", 0);
		pw.write(json.toJSONString());
	}
  }
}

结果显示

输入图片说明