使用jquery和ajax在同一页面中加载php表单

我想要一个从PHP表单加载值并在同一文件中的div中显示结果的函数

我在PHP文件中有一个表单，代码如下：

<?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>";
?>

加载值的

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文件中单击“下一步”时，它没有显示任何内容，您能找到错误吗？

您没有在

submit

函数中执行

$（function（）{..

。您必须删除该行，才能得到以下结果：

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

函数提交（）{
var mat=“mat”；
var dataString='mat='+mat；
$.ajax({
类型：“POST”，
url:“check.php”，
数据：dataString，
成功：功能（res）{
戈托比斯克罗尔（“结果”）；
$（'#result'）.html（“









”）.hide（）.fadeIn（2500，函数（）{
$（'#result'）.html（res+“

Finished”）；
});
}
});
返回false；
}

尝试将

console.log（res）

添加到success函数中，然后查看是否有任何结果。

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