使用jquery和ajax在同一頁面中加載php表單

Question

我想要一個從PHP表單加載值並將結果顯示在同一文件的div中的函數；

我在PHP文件中有一個表單，其代碼為bellow：

<?php

 echo "<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>";
echo"<script type='text/javascript' src='script.js'></script>";


echo"<form method='post' action=''  >";
echo " <select name='mat'><option value=''>Choose: </option>";
echo"<option >hello</option>";
echo"</select>";
echo"<input type = 'submit'  value='next' onclick='submit();' />";
echo"</form>";

echo"<div id ='result'> </div>";
?>

並且script.js的函數是：

function submit() {
    $(function () {
        var mat = "mat";
        var dataString = 'mat=' + mat;
        $.ajax({
            type: "POST",
            url: "check.php",
            data: dataString,
            success: function (res) {
                goToByScroll("result");
                $('#result').html("<br><br><br><br><br><br><br><br><br><br>").hide().fadeIn(2500, function () {
                    $('#result').html(res + "<br /><br /> Finished");
                });
            }
        });
        return false;
    });
}

和加載值的check.php是：

<?php 
function safe($value)
{
    htmlentities($value, ENT_QUOTES, 'utf-8');
    return $value;
}
if (isset($_POST['mat'])) {
    $mat = safe($_POST['mat']);
    echo ($mat);
}
elseif (!isset($_POST['mat'])) {
    header('Location: error?mat=notfound');
} ?>

但是，當我在第一個PHP文件中單擊“下一步”時，它沒有顯示任何內容，您能找到錯誤嗎？

Answer 1

你是不是在執行$(function(){ ..內submit 。功能你必須刪除了這一行，所以你會得到這樣的：

function submit() {
    var mat = "mat";
    var dataString = 'mat=' + mat;
    $.ajax({
        type: "POST",
        url: "check.php",
        data: dataString,
        success: function(res) {
            goToByScroll("result");
            $('#result').html("<br><br><br><br><br><br><br><br><br><br>").hide().fadeIn(2500, function() {
                $('#result').html(res + "<br /><br /> Finished");
            });
        }
    });
    return false;
}