在 Struts 2 中使用 Ajax 时如何传递属性答案

【问题标题】：How to pass property when using Ajax in Struts 2在 Struts 2 中使用 Ajax 时如何传递属性
【发布时间】：2015-06-24 12:04:59
【问题描述】：

当我尝试提交表单时将 Struts 2 与 Ajax 一起使用，该属性未传递给操作类，因此我收到 null。

我的 JSP：

<head>
    <title>Login</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="publicHtml/css/bootstrap.min.css">
    <script src="publicHtml/js/jquery.min.js"></script>
    <script src="publicHtml/js/bootstrap.min.js"></script>
    <script>
        var contextName = "<%=request.getContextPath()%>";
    </script>
    <script src="publicHtml/js/automation.js"></script>
</head>
<body>
    <form action="loginAction" id="myForm" method="post">
        <div class="container-fluid">
            <div class="jumbotron">
                LOG CREATION
            </div>
        </div>

        <div class="row" style="height: 50px">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="text-align: center">
                <mark style="color: red;display: none;" id="errorMessage"></mark>
            </div>
        </div>
        <div class="row"> 
            <div class="col-lg-7 col-md-7 col-sm-5 col-xs-5">
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                <div id="loginJSP">
                    <div class="form-group">
                        <input type="text"  class="form-control" placeholder="User Name" id="userName" name="userName">
                    </div>
                    <div class="form-group">
                        <input type="password"  class="form-control" placeholder="Password" id="password" name="password">
                    </div>
                    <input type="button" onclick="validLogin()"  value="Login">
                </div>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-1 col-xs-1">

            </div>
        </div>
    </form>
</body>

我的Action：

public class LoginAction extends ActionSupport {
String forward = ERROR;
public LoginAction() {
}

/**
 *
 * @return @throws Exception
 */
@Override
public String execute() throws Exception {
    
    System.err.println("Assigned Property is  "+userName);
    forward = null;
    return forward;
}



private String userName=null,password=null;
public String getUserName() {
    return userName;
}

public void setUserName(String userName) {
    this.userName = userName;
}

public String getPassword() {
    return password;
}

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

我的 JS 是：

function submitForm(actionName, commandName) {

var frm = document.forms[0];
var url = contextName + "/" + actionName + "?command=" + commandName;
frm.action = url;
frm.submit();
}
function validLogin() {
alert('hi');
var userName = document.getElementById('userName').value;
var password = document.getElementById('password').value;
document.getElementById('errorMessage').innerHTML = "";
$('#errorMessage').hide();
 alert('hi');
if (userName == '' && password == '') {
    $('#errorMessage').append("USERNAME AND PASSWORD CANT BE BLANK");
    $('#errorMessage').show();
} else {
    $.ajax({
        type: "POST",
        url: "./loginAction",
        data: "command=loginValidation",
        beforeSend: function () {
        },
        success: function (response) {
  },
        error: function (e) {
            alert('hi error');
        }
    });
}

我提供的输入是AAA。

预期的输出应该是：

Assigned Property is AAA

我的输出是：

Assigned Property is null

【问题讨论】：

... 除了“command=loginValidation”之外，您不发送任何内容，您期望什么？！至少在 Ajax 调用中你没有；不可能知道您的代码在做什么，因为您所做的只是发布一些独立的 JavaScript，而没有表明您是如何实际进行表单处理的。 HTML 和 JS 都没有说明它们是如何协同工作的，或者它们是否协同工作。
如果您将按钮更改为输入类型="submit"（并删除 onClick 处理程序），是否会传递参数？我敢打赌他们会。看看上面@Dave 的回答——你实际上并没有在 Ajax 调用中发送表单数据。

标签： javascript java jquery ajax struts2

【解决方案1】：

验证后您没有在 ajax 调用中发送参数。如果您使用以下代码，则可以解决此问题：

$.ajax({
    type: "POST",
    url: "./loginAction",
    data: {command: "loginValidation", userName: userName, password: password},
    beforeSend: function () {
    },
    success: function (response) {
    },
    error: function (e) {
        alert('hi error');
    }
});

【讨论】：