Struts2之ajax提交表单（借助jquery插件）

最新推荐文章于 2021-08-05 17:00:07 发布

u012871207

最新推荐文章于 2021-08-05 17:00:07 发布

阅读量2.1k

点赞数 1

分类专栏： S2SH(struts2+spring+hibernate) 文章标签： ajax struts2ajax

本文链接：https://blog.csdn.net/u012871207/article/details/43413823

版权

S2SH(struts2+spring+hibernate) 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1 index.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">
<script type="text/javascript" src="JS/jquery-1.9.1.min.js" ></script>
<script type="text/javascript">
        $(document).ready( function() {
   $("#btn_login").click( function() {
                 var url = 'ajaxLogin';
                //获取表单值，并以json的数据形式保存到params中
                var params = {
               loginName:$("#username").val(),
               password:$("#password").val(),
   };
               //使用$.post方式
              $.post(
              url, //服务器要接受的url
               params, //传递的参数
               function qwer(data){ //服务器返回后执行的函数参数 data保存的就是服务器发送到客户端的数据

              alert(data);//就是root对应的值这里是result!!
              var member = eval("("+data+")"); //包数据解析为json 格式

              $('#result').html("欢迎您:"+member.name+" "+"你的密码:"+member.password);

                                                   },

            'json' //数据传递的类型 json

                                     );

                              });

                    });

</script>
</head>
<body>

</form>

<p>
这里显示ajax信息：
<br />
<span id="result"></span>
</p>
</body>
</html>

2 action类

package org.action;

import com.opensymphony.xwork2.ActionSupport;
import java.util.HashMap;
import java.util.Map;

import net.sf.json.JSONObject;

public class AjaxLoginAction extends ActionSupport {
   // 用户Ajax返回数据
   private String result;

   // struts的属性驱动模式，自动填充页面的属性到这里
   private String username;
   public String getUsername() {
       return username;
   }

   public void setUsername(String username) {
       this.username = username;
   }

   private String password;

   public String getResult() {
       return result;
   }

   public void setResult(String result) {
       this.result = result;
   }

   public String getPassword() {
       return password;
   }

   public void setPassword(String password) {
       this.password = password;
   }

   @Override
   public String execute() {

       // 用一个Map做例子
       Map<String, String> map = new HashMap<String, String>();

       // 为map添加一条数据，记录一下页面传过来username
       map.put("name", this.username);
       map.put("password", this.password);

       // 将要返回的map对象进行json对象转换
       JSONObject jo = JSONObject.fromObject(map);

       // 调用json对象的toString方法转换为字符串然后赋值给result
       this.result = jo.toString();

       // 输出result看看是不是json字符串
       System.out.println(this.result);

       return SUCCESS;

   }
}

3 struts.xml

<?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="ajax" extends="json-default">
        <action name="ajaxLogin" class="org.action.AjaxLoginAction">

            
            <result type="json">
                
                
                <param name="root">result</param>
            </result>
        </action>
    </package>
</struts>

4所需jar包截图

5 所需jquery.js

6运行截图：

u012871207

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Struts2之ajax提交表单（借助jquery插件）

1 index.jsppageEncoding="UTF-8"%> $(document).ready( function() { $("#btn_login").click( function() { var url = 'ajaxLogin';
复制链接

扫一扫