4

我正在使用 struts2 进行 Web 应用程序开发。在我想使用的注册表单中query ajax,以便异步提交表单,并且在成功提交表单时,我可以获得以 toast或出现和消失的元素形式的服务器端成功消息。

好吧,为此我已经尝试了很多,并且在某个地方实现了这件事,但没有使用jquery ajax,而是正常javascript and ajax

代码流程如下:

  • Home.jsp包含表单的页面。

            <s:form theme="simple" action="registrationForDemo"> <table>
                <tbody>
                    <tr>
                        <td><s:label value="username" /></td>
                        <td><s:textfield name="uName"
                                cssClass="textfield" /></td>
                    </tr>
                    <tr>
                        <td><s:label value="password" /></td>
                        <td><s:password name="password"
                                cssClass="textfield" /></td>
                    </tr>
                    <tr>
                        <td><s:label value="email" /></td>
                        <td><s:textfield name="email"
                                cssClass="textfield" /></td>
                    </tr>
                    <tr>
                        <td><s:label value="contact no." /></td>
                        <td><s:textfield name="contactNo"
                                cssClass="textfield" /></td>
                    </tr>
                    <tr>
                        <td><s:label value="location" /></td>
                        <td><s:textfield name="location"
                                cssClass="textfield" /></td>
                    </tr>
                    <tr>
                        <td><s:label value="category" /></td>
                        <td><s:select list="{'Hospital','Doctor','Clinic','Others'}" name="category"/></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><s:submit
                                value="Submit" cssClass="button" /></td>
                    </tr>
                </tbody>
            </table>
        </s:form>
    
  • 定义映射的文件即struts.xml。

struts.xml 文件

  • 当数据成功保存在数据库中时,输出页面又是同一页面。

现在使用 ajax 和 jquery 我想知道如何实现所需的功能。从哪里传递动作......以及如何走得更远......?

4

3 回答 3

5

好吧,如果您使用简单的 java-script 和 AJAX 实现了它,我相信它与您将使用 Jquery 做的事情没有什么不同。Jquery 与 java-script 没有什么不同,因为它是一个库构建不使用 java 脚本,以使开发人员生活愉快。

您可以使用 Jquery post 方法提交您的表单,并且可以在成功注册时从服务器发送一个字符串,例如

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

对于更精细的控制,我建议您使用Struts2-Json插件和 Jquery Json 功能将数据发送到服务器并从服务器取回结果,例如

var formInput='val='+val;
   $.getJSON('myaction',formInput,function(data) {
     $.each(data.myData,function(index, value){
       alert(index);
});
});

有关更多详细信息,请参阅本教程

于 2012-08-27T07:27:36.317 回答
1

对我来说,解决方案是jquery.html()功能。我通过其他 html 内容来完成工作。jQuery html

Jquery 很棒而且重量也很轻。

于 2012-11-26T10:58:19.480 回答
0
//saving category button
    $("#save").on({click:function () {
        if (!($("#subcategory").val().length == 0)) {
            $.ajax({url:"savecategory", data:$("#savecategoryform").serialize(), type:"post", dataType:"json", success:function (data) {
                alert("Successfully Saved");
            }});
        }
    }});


<form id="savecategoryform">
                        <table id="addtable">
                            <thead id="subcategoryhead">
                                <tr>
                                    <td align="left">
                                        <input type="text" name="strMainCategoryName"
                                            value="Main Category" width="80" id="maincategory"
                                            class="inputmaintext">
                                    </td>
                                    <td colspan="2" align="left">
                                        <img src="../images/plus.png" width="18" height="18"
                                            id="addmaincategory" hovertext="Add" class="link">
                                    </td>
                                </tr>
                            </thead>
                            <tbody id="subcategorybody"></tbody>
                        </table>
                        <input type="button" value="Save" id="save">
                    </form>
于 2014-06-13T06:03:40.763 回答