0

jquery.ajax 関数を使用して、入力フィールドの値を php ファイルに投稿しようとしています。php 部分は mysql データベースにデータを挿入し、一意のピンコードを生成し、ピンコードを json で jquery コードに返す必要があります。

しかし、フォームを送信しても何も起こりません...

ブラウザで main.php ファイルに直接アクセスすると、固有の PIN コードが表示され、PHP スクリプトはその PIN コードをデータベースに挿入します。したがって、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);
    }   

?>
4

3 に答える 3

1

ここのJQuery APIから

フォームとその子要素では、送信、長さ、メソッドなど、フォームのプロパティと競合する入力名または ID を使用しないでください。名前の競合により、混乱を招く障害が発生する可能性があります。ルールの完全なリストと、これらの問題についてマークアップを確認するには、DOMLint を参照してください。

あなたが書いた

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

フォームの ID/名前を変更してみてください。

于 2012-05-10T12:11:06.270 に答える
0

$.ajax で置き換えます

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

に

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

それが役に立てば幸い。

于 2012-05-10T12:08:29.927 に答える
0

また、あなたは使用しませんでした

return false;

デフォルトのフォーム送信を防ぐための Summit コールバック。このように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;
            });
        });
于 2012-05-10T12:12:18.770 に答える