jQuery POST 表单数据

php jquery ajax

2022-08-30 18:15:27

当我单击“提交”时，我希望所有表单数据都经过 POST 处理.php。然后在处理.php我想回显出POST数据，最后将结果div中的所有内容替换为过程中完成的内容.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 ---------------------------------------- -->

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

答案 2

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

测试