無法在不重新加載頁面的情況下提交表單

Question

我有以下代碼，希望在不重新加載頁面的情況下提交表單，但是它將重新加載整個頁面，並且在控制台中檢查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頁面的結果

Answer 1

更新您的功能。 在函數中傳遞事件對象。 並使用event.preventDefault（）阻止默認的提交操作。

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

Answer 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

Answer 3

不要混用表單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);
            }
        });

Answer 4

您需要將數據從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);
?>

Answer 5

與其監聽輸入的click事件，不如監聽表單的submit 。

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