jQuery POST表单数据

Question

当我点击提交按钮时，我希望将所有表单数据POST到process.php。然后在process.php中，我想要回显POST数据，并最终将结果div中的所有内容替换为在process.php中所做的事情。

<script type="text/javascript">
    $(document).ready(function(){
        $("#myform").submit( function () {    
            $.ajax({   
                type: "POST",
                dataType: "html", 
                cache: false,  
                url: "process.php",   
                success: function(data){
                    $("#results").html(data);                       
                }   
            });   
            return false;   
        });

        //$("#myform").submit( function () {
            //$('#results').html("yay");                    
        //}  
            // });  
        //} );          
    });
</script>

<form name="myform" id="myform" action="" method="POST">  
<!-- The Name form field -->
    <label for="name" id="name_label">zoom</label>  
    <input type="text" name="zoom" id="zoom" size="30" value=""/>  
    <br>
</select>


<!-- The Submit button -->
    <input type="submit" name="submit" value="Submit"> 
</form>

<!-- FORM END ----------------------------------------  -->


<!-- RESULTS START ---------------------------------------- -->
    <div id="results">nooooooo<?PHP $_SESSION[''] ?><div>
    <!-- <input type="image" name="mapcoords" border="0" src="mapgen.php"> ---- -->
<!-- RESULTS END ---------------------------------------- -->

- LabRaTT

---

那么，问题是什么？ - Ignacio

你的代码似乎已经实现了这个（冷检）功能。问题出在哪里？ - Halcyon

Answer 1

您可以调用$.post，将表单数据序列化后传递，如下所示：

<script type="text/javascript">
        $(document).ready(function(){
            $("#myform").submit( function () {    
              $.post(
               'process.php',
                $(this).serialize(),
                function(data){
                  $("#results").html(data)
                }
              );
              return false;   
            });   
        });
</script>

- keepitterron

---

那段代码之前是可以运行的，但现在我想改变一件事情... 我有一个<select name="drop1" id="selectOwner" size="42" style = "width:190px;">，我希望当用户从列表中选择某个选项时能够运行上述代码。 - LabRaTT

Answer 2

$("#myform").submit( function () {    
    $.ajax({   
        type: "POST",
        data : $(this).serialize(),
        url: "process.php",   
        success: function(data){
            $("#results").html(data);                       
        }   
    });   
    return false;   
});

测试一下

- DJafari

Answer 3

这里有另一种完成此操作的方式。这个例子使用jQuery validate插件，可以自动验证所有表单字段。 从这里下载jquery：

https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js

从这里下载validation plugin：

http://jquery.bassistance.de/validate/jquery-validation-1.10.0.zip

    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="jquery.validate.1.7.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("#customForm").validate({
    debug: false,
    rules: {
      name: {required:true,minlength:8,maxlength:8},
      email: {required:true,email:true},
    },
        submitHandler: function(form) {
     // do other stuff for a valid form 
     $('#rsltx').html('<img src="WhiteLoading.gif"> Processing... please wait');
     $.post('post.php', $("#customForm").serialize(), function(data) {
                        $('#rsltx').html(data);
         });
        }
  });
});
</script>

<form method="post" id="customForm" action="">
<div>
 <label for="name">Name</label>
 <input id="name" name="name" type="text" autocomplete="off" required/>
</div>
<div>
 <label for="email">E-mail</label>
 <input id="email" name="email" type="email" autocomplete="off" required/>
</div>
<div>
 <input id="send" name="send" type="submit" value="Send" />
</div>
</form>

- Rohan Bagchi

Answer 4

var form = $('#mob_ticket_form')[0];
var data = new FormData(form);
$.ajax({
  type: "POST",
  enctype: 'multipart/form-data',
  url: '{{route("submit_ticket")}}',
  data: data,
  processData: false,
  contentType: false,
  cache: false,
  timeout: 800000,
  success: function(response) {
    if (response.status == 200) {
      $("#exampleModalCenter").modal('show');

    } else {
      alert(response.message);
    }
  },
  error: function(response) {
    // console.log(response)
    notify('Something went Wrong!', 'danger')
  }
});

- Navin