struts2、ajax實現前后端交互

本文轉載自查看原文 2018-03-06 10:53 1619 struts2/ eclipse

跳過struts2環境搭建部分，或者可以看我的博客(http://www.cnblogs.com/zhangky/p/8436472.html)，里面有寫，很詳細。

需要導入的jar包（struts官網有，自己下）

一、java類

    private String username;
    private String pwd;
    private Map<String, Object> result;
    
    public String getUsername() {
        return username;
    }

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

    public String getPwd() {
        return pwd;
    }

    public void setPwd(String pwd) {
        this.pwd = pwd;
    }

    public Map<String, Object> getResult() {
        return result;
    }

    public void setResult(Map<String, Object> result) {
        this.result = result;
    }

    public String login() {
        result = new HashMap<String , Object>();
        if(username.equals("z") && pwd.equals("123")) {
            result.put("success", true);
            result.put("username", username);
            return "success";
        }else {
            result.put("success", false);
            return "success";
        }
        
    }

二、html頁面

<html>
<head>
<meta charset="UTF-8">
<title>登錄</title>
</head>
<body>
      <div id="tips"></div>
      <input type="text" id="username"/>
      <input type="password" id="pwd"/>
      <button onclick="login()">登錄</button>
</body>
<script src="jquery.min.js"></script>
<script>
    function login(){
        const username = document.getElementById("username").value;
        const pwd = document.getElementById("pwd").value;
        $.ajax({
            type:"POST",
            url:"login",
            data:{
                "username":username,
                "pwd":pwd
            },
            dataType:"json",
            success:function(data){
                let tips = document.getElementById("tips");
                if(data.success == true){
                    window.location.href = "welcome.html?username=" +　data.username
                }else{
                    tips.innerHTML = "用戶名或者密碼錯誤";
                }
            },
            error:function(error){
                
            }
        })
    }
</script>
</html>

三、struts.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
    "http://struts.apache.org/dtds/struts-2.3.dtd">

<struts>
   <package name="default" namespace="/" extends="json-default,struts-default">
       <action name="login" class="day20.LoginAction" method="login" >
            <!--result默認name是success可不寫，由於返回的是json格式數據,因此type必須是json -->
            <result type="json">
            <!--param 的 name固定寫，result就是java類要返回的數據變量  -->
               <param name="root">result</param>
            </result>
       </action>
   </package>
</struts>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Struts2+Ajax實現數據交互 struts2和JSON的數據交互使用ajax實現前后端是數據交互 struts2中ajax的使用 struts2+ajax 前后端傳值 ajax struts2 數據的返回形式 Struts2 ajax json小例子 ajax form表單，前后端交互前后端交互實現使用hibernate和struts2實現分頁功能