Question

我尝试使用jquery.ajax函数将输入字段中的值发布到php文件。 php部分必须将数据插入到mysql数据库中，生成一个唯一的pincode并通过json将pincode返回给jquery代码。

但提交表格时没有任何反应......

当我直接浏览浏览器中的main.php文件时，它会显示一个独特的密码，而php脚本甚至会在数据库中插入密码。所以我认为JSON部分出错，但我无法弄清楚原因。

我希望有人能告诉我我做错了什么。任何帮助都会很棒！

代码下面是工作代码！

HTML部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AJAX PHP JSON Test</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("form#userForm").submit(function() {
                var inputFname = $('#inputFname').attr('value');
                var inputLname = $('#inputLname').attr('value');
                $.ajax({
                    type: "POST",
                    url: "main.php",
                    data: {inputFname: inputFname,inputLname: inputLname},
                    dataType: "json",
                    contentType:"application/json; charset=utf-8",
                    success: function(data) {
                        $("p.succesText").html(data.jsCode);
                        $("form#userForm").hide();
                        $("div.success").fadeIn();
                    },
                    error: function(xhr, status, error) {
                        $("form#userForm").hide();
                        $("p.errorHead").html("Something went wrong.");
                        $("p.errorText").text("ResponseText: " + xhr.responseText
                                            + "Statuscode: " + xhr.status
                                            + "ReadyState: " + xhr.readyState);
                        $("div.error").fadeIn();
                    }
                });
                return false;
            });
        });     
    </script>
</head>
<body>
    <div class="MiddleWhite">
        <form id="userForm" method="post" name="userForm" action="">
        <label for="inputFname" class="LabelForInput">
            Enter your Forename
        </label>
        <input type="text" name="inputFname" id="inputFname" class="TextInput"
            size="20" />
        <br />
        <br />
        <label for="inputLname" class="LabelForInput">
            Enter your Surname
        </label>
        <input type="text" name="inputLname" id="inputLname" class="TextInput"
            size="20" />
        <br />
        <br />
        <br />
        <button type="submit" class="Button">
            Generate code</button>
        </form>
        <div class="success" style="display: none;">
            <p class="succesText">
            </p>
            <p class="checkCallText">
            </p>
        </div>
        <div class="error" style="display: none;">
            <p class="errorHead">
            </p>
            <p class="errorText">
            </p>
        </div>
    </div>
</body>
</html>

PHP部分：

<?php header('content-type: application/json; charset=utf-8');

    $log = array();


        $varFname = htmlspecialchars($_POST["inputFname"]);
        $varLname = htmlspecialchars($_POST["inputLname"]);

        //Make Database connection
        $db = mysql_connect("192.168.178.254","root","852456");
        if(!$db) die("Error connecting to MySQL database.");
        mysql_select_db("Ajax" ,$db);

        //Generate code and check if code already exists in the database
        do
        {
            $varCode = rand(10000, 99999);
            $dbCheckCode = "";
            $dbCheckCode = mysql_query("SELECT * FROM TableAjax WHERE code='$varCode'");
        }
        while (mysql_fetch_array($dbCheckCode) !== false);

        //Save the Form data in the database
        $sql = "INSERT INTO TableRecordcall (fname, lname, code) VALUES (".PrepSQL($varFname) . ", " .PrepSQL($varLname) . ", " .PrepSQL($varCode) . ")";
        mysql_query($sql);  

        //Return code to frontend
        $log['jsCode'] = $varCode;

        echo json_encode($log);


    //Clean SQL statement
    function PrepSQL($value)
    {
        if(get_magic_quotes_gpc()) 
        {
            $value = stripslashes($value);
        }
        $value = "'" . mysql_real_escape_string($value) . "'";
        return($value);
    }   

?>

Answer 1

来自JQuery API here

表单及其子元素不应使用与表单属性冲突的输入名称或ID ，例如 submit ， length ，或方法。名称冲突可能导致混乱的故障。有关规则的完整列表以及检查这些问题的标记，请参阅DOMLint。

你写了

<form id="submit" method="post" name="submit" action="">

尝试更改表单的ID /名称。

Answer 2

在$ .ajax中取代

data: {'inputFname': inputFname,'inputLname': inputLname},

通过

data: {inputFname: inputFname,inputLname: inputLname},

希望它有所帮助。

Answer 3

你也没有使用

return false;

在峰会回调中阻止默认表单提交。像这样改变你的js代码

$(document).ready(function() {
            $("form#submit").submit(function() {
                var inputFname = $('#inputFname').attr('value');
                var inputLname = $('#inputLname').attr('value');
                $.ajax({
                    type: "POST",
                    url: "main.php",
                    data: {inputFname: inputFname,inputLname: inputLname},
                    dataType: "json",
                    contentType:"application/json; charset=utf-8",
                    success: function(data) {
                        $("p.succesText").html(data.jsCode);
                        $("form#submit").hide();
                        $("div.success").fadeIn();
                    },
                    error: function(xhr, status, error) {
                        $("form#submit").hide();
                        $("p.errorHead").html("Something went wrong.");
                        $("p.errorText").text("ResponseText: " + xhr.responseText
                                            + "Statuscode: " + xhr.status
                                            + "ReadyState: " + xhr.readyState);
                        $("div.error").fadeIn();
                    }
                });
                return false;
            });
        });

jQuery，AJAX，PHP数据交换问题

3 个答案: