Struts 2提交form表单执行action后不跳转(ajax)

时间：2022-03-02 19:24:15

今日写项目写到一个商品加入购物车功能，原本设计是点击按钮之后，存储数据，并弹出一个div告知用户添加成功，页面不跳转，看似很简单的功能，却在“不跳转”这点上卡住，我不想跳转咋就这么难呢？查了很多资料，知道了要用ajax，因为本人愚钝，并没有能够解决我的小问题，一度想要放弃，特别感谢熊世唯同学不耐其烦的指导，让我解决了这个小难题

Struts 2提交form表单执行action后不跳转(ajax)

本篇博客旨在还没有深入理解ajax的情况下，实现一个提交form表单后不跳转的功能（因为本人也完全不懂）

1.导入jQuery

这个很简单，在jsp页面head里加上

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

2.写提交表单的函数

同样也是在jsp里加上js代码

<script type="text/javascript">
function addcart(){
var goodID = "<s:property value='goods.goodsId'/>";
var num = $('#num').val();
 $.get("insertCart?goodsId="+goodID+"&goodsNum="+num,function(data,status){
 document.getElementById("insertCartMessage").style.display="block";
 });
return false; 
 }
</script>

上面insertCart是我action的名字，insertCartMessage则是显示提示信息div的id

简化之后应该是这样

<script type="text/javascript">
function ajaxsubmit(){
 $.get("actionname",function(data,status){
 })； 
return false;
 }
</script>

如果要用post方法的话就是

$.post("actionname", "", function(message, status) {

3.为提交按钮指定函数

这个简单，就是点击后执行上面的函数就行了。我用的是a标签：

<a href="javascript:addcart();">加入购物车</a>

4.更改action

  • 加一个InputStream,并为其提供getter和setter方法
  • 在execute()中为inputStream设置值，这里可以按需求设置，比如”添加成功”/”添加失败”什么的
package org.action;

import java.io.ByteArrayInputStream;
import java.io.InputStream;

import com.opensymphony.xwork2.ActionSupport;

public class InsertCartAction extends ActionSupport{
private InputStream inputStream;  

public InputStream getInputStream() {  
return inputStream;  
    }  

public void setInputStream(InputStream inputStream) {
this.inputStream = inputStream;
    }

public String execute() throws Exception {  

//System.out.println("正在添加入购物车");

        String str = "";  
        inputStream = new ByteArrayInputStream(str.getBytes("UTF-8"));

return SUCCESS;  
    }
}

5.配置struts.xml

在struts配置文件中，result的type设为stream。其中包含两个参数，第一个是contentType，表示响应的类型，如果有中文的话最好设置一下编码，第二个参数是用来指定Action中的对应的输入流，它的默认值就是inputStream，所以可以省略。

<action name="insertCart" class="org.action.InsertCartAction">
<result name="success" type="stream">  
<param name="contentType">text/html; charset=utf-8</param>  
<param name="inputName">inputStream</param>
</result>  
</action>
标签：

相关文章