Struts2 and jsp form submit using jquery ajax post and getting a toast like message which comes and disappears?

问题

I am using struts2 for my web application development. In a registration form there I want to use query ajax, so that the form gets submitted asynchronously and on a successful form submission I can get a server side success message in form of a toast or a element that comes and disappears.

Well for that I have tried a lot and somewhere achieved this thing but not using jquery ajax but normal javascript and ajax rather.

The flow of the code is as follows:

Home.jsp page with the form contained.

        <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>

The file where the mapping are defined i.e. struts.xml.

When data is saved successfully in the database the output page is again the same page.

Now Using ajax and jquery I want to know how to achieve the required functionality. Where to pass the action from ... and how to go further... ??

回答1:

Well if you have achieved it with simple java-script and AJAX and i believe that it's not different with what you will do with using Jquery. Jquery is nothing different that java-script as its a library build don java script to make developer life happy.

You can submit your form using Jquery post method and can send a string from the server on successful registration something like

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

For more fine control i will suggest you to use Struts2-Json plugin and Jquery Json feature to send data to the server and get back results from the server something like

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

For more details refer to this tutorial

ajax-dynamic-content-with-struts2-jquery-and-json-plugin

回答2:

well for me the solution was jquery.html() function. Where I passed the other html content to get the work done. Jquery html

Jquery is awesome and light weight too.

回答3:

//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>

来源：https://stackoverflow.com/questions/12137300/struts2-and-jsp-form-submit-using-jquery-ajax-post-and-getting-a-toast-like-mess

标签

jsp

jquery

struts2

toast