SSH框架下ajax调用action并生成JSON再传递到客户端以get和post方式提交

Posted 2020-11-04 傻子没有烦恼

需要完成的任务：

主要是把JSP页面上图片ID传给服务器端，服务器读取cookie看是否有username，如果有则根据ID读取MongoDB数据库，读出图片URL，再存放到mysql中的collection数据库中，实现了收藏功能。

第一步：就是使用ajax实现前后台的交互。

jsp页面代码：

<a id="1" class="bsc" onclick="collect(this.id)"></a>

js代码：

<script>
function collect(id) 
{ 
//var newwin=window.open()
var str=document.getElementById(id).src;
var arr=str.split("/"); //切片
//alert(arr[5]);     
var re = /\d+/g;   // 每次匹配至少一个数字  且全局匹配  如果不是全局匹配，当找到数字123，它就会停止了。就只会弹出123.加上全局匹配，就会从开始到结束一直去搜索符合规则的。如果没有加号，匹配的结果就是1，2，3，5，4，3，3，8，7，9并不是我们想要的，有了加号，每次匹配的数字就是至少一个了。
var num = arr[5].match(re);  //取图片名称，再用正则表达式匹配数字
num = num[0];
alert(num); 
 //以上是实现获取图片ID的功能；
//判断浏览器
if(window.ActiveXObject){
    myAjaxObject = new ActiveXObject("Microsoft XMLHTP");
}else{
    myAjaxObject = new XMLHttpRequest();
}
/*
  1.open() 方法的 url 参数是服务器上文件的地址：该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，
   比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）,这里我是请求的是action，并把你想传送的数据放在后面，具体见代码。

    2. 与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

     然而，在以下情况中，请使用 POST 请求：

• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

    3.true还是false，true是表示异步请求，异步请求就是，请求完服务器，可以不用只等待服务器响应，可以去执行其他操作，直到收到服务器响应。 

    4.send（）将请求发送到服务器

*/
myAjaxObject.open("post","collect.action?date="+num,true);
myAjaxObject.onreadystatechange = actionResponse; //看下面函数
myAjaxObject.send();
} 
//获取服务器响应
/*
responseText 获得字符串形式的响应数据。
还有其他属性，自行查找
这里我只测试读取一个数据，多数据可以循环读取
*/
function actionResponse(){
    if(myAjaxObject.readyState==4){
        if(myAjaxObject.status==200){
            var returnJSONString = myAjaxObject.responseText;
            var returnJSON = JSON.parse(returnJSONString);
            var showString = "";
            /*for(var i=0;i<returnJSON.length;i++){
                showString = 
            }*/
            showString = returnJSON[0];
            alert(showString);
        }
    }
}
</script>

structs.xml代码：

<action name="collect" class="action.collection" method="collect">

后台action代码：

package action;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class collection extends ActionSupport{
    public String collect() throws IOException{
　　　　　//发送数据
        List listString = new ArrayList();
        listString.add("zx");
        JSONArray json = JSONArray.fromObject(listString);
        System.out.println(json.toString());
        ServletActionContext.getResponse().setContentType("text/html");
        ServletActionContext.getResponse().setCharacterEncoding("utf-8");
        ServletActionContext.getResponse().getWriter().printf(json.toString());
        ServletActionContext.getResponse().getWriter().flush();
        ServletActionContext.getResponse().getWriter().close();
　　　　 //接收数据
        String num = ServletActionContext.getRequest().getParameter("date");
        System.out.println(num);
        return null;
    }
}

以上代码实现了简单的数据接收发送。以上的后台发送的数据类型是list中存放String，根据自己需要。可以list中存放Bean，Map中存放字符串或Bean发送。

同理，前台传送数据类型也可以根据需要改变类型

例如：

var  info={

num:"data1",

num2:"data2",

}

完事了。接下来我要去实现读取cookie数据，判断用户是否处于登录状态，希望对你有帮助，有错误或改进的地方欢迎指正。