无法在不重新加载页面的情况下提交表单答案

【问题标题】：not able to submit form without page reloading无法在不重新加载页面的情况下提交表单
【发布时间】：2016-01-18 13:58:07
【问题描述】：

我希望使用以下代码在不重新加载页面的情况下提交表单，但它会重新加载整个页面，并且在控制台中检查时 script.php 页面也没有被执行。

index.php 页面上的代码

<script>
    $(function() {
        $(".submit").click(function() {
            var name = $("#name").val();
            var dataString = 'name=' + name;
            console.log(dataString);
            $.ajax({
                type: "POST",
                url: "script.php",
                data: dataString,
                success: function() {
                    $('#result').html(response);
                }
            });

            return false;
        });
    });
</script>

<form method="post" name="form">
    <input id="name" name="name" type="text" />
    <input type="submit" value="Submit" class="submit" />
</form>

<div id="result"></div>

script.php 页面上的代码

<?php
$name=$_POST['name'];
echo $name;
?>

谁能告诉我如何在不重新加载页面的情况下提交表单，并在 index.php 页面上显示 script.php 页面的结果

【问题讨论】：

标签： javascript php jquery ajax forms

【解决方案1】：

更新你的功能。在函数中传递事件对象。并使用 event.preventDefault() 来阻止默认提交操作。

$(".submit").click(function(e) {
e.preventDefault();

【讨论】：

【解决方案2】：

试试这个

<script>
$(function() {
    $(".submit").click(function(event) {
        event.preventDefault();
        var name = $("#name").val();
        var dataString = 'name=' + name;
        console.log(dataString);
        $.ajax({
            type: "POST",
            url: "script.php",
            data: dataString,
            success: function() {
                $('#result').html(response);
            }
        });

        return false;
    });
});

或

<input type="button"  class="submit" />Submit

【讨论】：

【解决方案3】：

您需要将 script.php 页面中的数据发送回您的 index.php 页面。为此去掉一点点 ajax：

  $.ajax({  
            type: "POST",  
            url: "script.php",  
            data: "datastring",
            dataType: "json",
            success: function(dataType){  
                $("#result").html(dataType); 
            }       
        });

在你的 script.php 中：

<?php
   $name=$_POST['name'];
   echo json_encode($name);
?>

【讨论】：

【解决方案4】：

不要将submit 和按钮click 混用。

如果您是button 的click 事件，则使用type="button"，如果您正在进行$("form").submit()，则使用type="submit"。

同时检查

$(".submit").click(function(e) {
e.preventDefault();

并检查您的ajax 帖子data，这样做

$.ajax({
            type: "POST",
            url: "script.php",     
            //changes made here           
            data: { name: $("#name").val()},
            //changes made here. you have not written response
            success: function(response) {
                $('#result').html(response);
            }
        });

【讨论】：

【解决方案5】：

您应该收听表单的submit，而不是收听输入的click 事件。

<script>
$(function() {
    $("#name-form").on('submit', function(e) {
        e.preventDefault(); // prevent form submission
        var name = $("#name").val();
        var dataString = 'name=' + name;
        console.log(dataString);
        $.ajax({
            type: "POST",
            url: "script.php",
            data: dataString,
            success: function(response) {
                $('#result').html(response);
            }
        });
    });
});
</script>

<form id="name-form" method="post" name="form">
    <input id="name" name="name" type="text" />
    <input type="submit" value="Submit" class="submit" />
</form>

<div id="result"></div>

【讨论】：