使用Ajax提交表单

时间:2014-02-17 06:28:19

标签: jquery html ajax

这是我的表格,我只需要在ajax中提交。我想在简单的html中使用ajax提交 我的总代码工作正常我必须用ajax提交其他内容

       <html>
  <head>

   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
   <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
  <script>
$(function() {
$("#register-form").validate({
    rules: {
        name: "required",
        email: {
            required: true,
            email: true
        },
        Budget: {
            required: true,
        },
        phone:"required",
        budget:"required",
        agree: "required"
    },
    messages: {
        name: "Please enter your Name",
        email: "Please enter a valid Email address",
        phone: "Please enter a valid Phone Number",
        Budget: "Please Select a Budget",
        agree: "Please accept our policy"
    },
    submitHandler: function(form) {
    alert("success");
        form.submit();
    }
});
});
  </script>
    </head>
     <body>
    <form action="" method="post" id="register-form" novalidate="novalidate">
        <div class="label">Name</div><input type="text" id="name" name="name" /><br />
        <div class="label">Email</div><input type="text" id="email" name="email" /><br />
        <div class="label">Phone Number</div><input type="text" id="phone" name="phone" /><br />
        <div class="label">budget</div>
        <select id="Budget" name="Budget">
            <option value="">select</option>
            <option value="1">0-100</option> <!-- first option contains value="" -->
            <option value="2">100-200</option> 
            <option value="3">200-300</option> 
        </select>
        <br />
        <div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" /></div>
    </form>
</body>

这是我的表格,我只需要在ajax中提交。我想在简单的html中使用ajax提交 我的总代码工作正常我必须用ajax提交其他内容

3 个答案:

答案 0 :(得分:1)

您可以在submitHandler上定义ajax调用;

submitHandler: function(form) {
        $(form).ajaxSubmit({
            url:"echo/html",
            type:"GET",
            success: function(response){
             alert(response)
            }
        });        
}

这是一个工作小提琴: http://jsfiddle.net/2fC3Z/

答案 1 :(得分:0)

创建一个javascript函数并在onsubmit事件的表单上调用它。

在函数中,将表单数据序列化为json数组并使用简单的ajax调用将其发布到您想要的页面

答案 2 :(得分:0)

使用类似下面的代码

        $.ajax({
            type: "PUT",
            url: "http://xxxxxx.com/post.php",
            contentType: "application/json",
            data: JSON.stringify({
                name: "Tricia",
                age: 37
            }),
            dataType: "text",
            success: function( response ){

                // Put the plain text in the PRE tag.
                $( "#putResponse" ).text( response );

            },
            error: function( error ){

                // Log any error.
                console.log( "ERROR:", error );

            },
            complete: function(){

                // When this completes, execute teh
                // DELETE request.
                makeDELETERequest();

            }
        });