码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-05-12 12:49:46      阅读:285      评论:0      收藏:0      [点我收藏+]

标签:sql   mongodb   ram   tst   int   文件的   cti   传递   其他属性   

需要完成的任务:

主要是把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数据,判断用户是否处于登录状态,希望对你有帮助,有错误或改进的地方欢迎指正。

 

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

标签:sql   mongodb   ram   tst   int   文件的   cti   传递   其他属性   

原文地址:https://www.cnblogs.com/zhxuxu/p/9028249.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!