如何使用ajax将向导表单发送到休息控制器

时间:2016-03-20 09:41:08

标签: javascript jquery ajax

我在div中有很多部分,每个部分都包含与

相同的表单字段
<div id="wizard_form">
    <section id="1">

        <input type="text" name="user_name" id="user_name" required />

        <input type="text" name="user_email" id="user_email" required />

        <input type="password" name="user_password" id="user_name" required />

        <input type="password" name="user_pass_repeat" id="user_pass_repeat" required />

        <select id="user_gender" name="user_gender" required>
            <option value="">Select Gender</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>                                       
        </select>

    </section>
    <section id="2">

        <input type="text" name="user_name" id="user_name" required />

        <input type="text" name="user_email" id="user_email" required />

        <input type="password" name="user_password" id="user_name" required />

        <input type="password" name="user_pass_repeat" id="user_pass_repeat" required />

        <select id="user_gender" name="user_gender" required>
            <option value="">Select Gender</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>                                       
        </select>

    </section>
    <section id="3">

        <input type="text" name="user_name" id="user_name" required />

        <input type="text" name="user_email" id="user_email" required />

        <input type="password" name="user_password" id="user_name" required />

        <input type="password" name="user_pass_repeat" id="user_pass_repeat" required />

        <select id="user_gender" name="user_gender" required>
            <option value="">Select Gender</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>                                       
        </select>

    </section>                         

</div>

现在在屏幕上出现一个带有“下一个”和“上一个”按钮的部分,可以在该更改事件中来回查看所需的部分我使用ajax从单个部分输入字段发送数据

onChanging: function(i, e, a) {

    var user_name = $("#wizard_form :input[id='user_name']").val();
    var user_email = $("#wizard_form :input[id='user_email']").val();
    var user_password = $("#wizard_form :input[id='user_password']").val();
    var user_gender = $("#wizard_for" ).find("select[name='user_gender']").val();
    var ajaxUrl = location.protocol + '//' + location.host + '/submit-ajax;

    /**
     * Ajax Logic 
     * */
    $.ajax({
        contentType : 'application/json',
        crossDomain: true,
        type: 'POST',
        url: ajaxUrl,
        dataType : 'json',
        data : JSON.stringify({ 
            'userName' : user_name,
            'userEmail' : user_email,
            'userPassword' : user_password,
            'userGender' : user_gender
        })
    })
}

需要一种从所有部分收集数据的方法,并且最后一部分完成按钮应该将所有数据提交给RestController。

0 个答案:

没有答案