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

Question

我想要一个从 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>";
?>

中的功能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;
}