php - ajax送信機能は応答を返しませんが、データベースを更新します

Question

これは、jquery を使用してクライアント側で検証する最初のフォームであり、.ajaxSubmit 関数で問題が発生しています (.ajax も使用しました)。送信ボタンをクリックすると、データベースは更新されますが、ajax 関数は更新されません。結果をページに返します。そのため、送信ボタンをクリックしても何も起こっていないように見えますが、データベースを見るとフィールドがデータで更新されています。また、ajax関数をコメントアウトしてアラートを使用すると、送信ボタンをクリックするとアラートがポップアップします。私はこれに1週間取り組んでいるので、誰かが私を助けてくれます。

html および jQuery スクリプトは次のとおりです。

<html>
<head>
<style type="text/css">
<!--
@import "./css/job.css";
-->
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.validate.js"></script>
<script type="text/javascript" src="./js/jquery.form.js"></script>
<script type="text/javascript">
(function($,W,D) {
    var JQUERY4U = {};

    JQUERY4U.UTIL =
    {
        setupFormValidation: function() {
            //form validation rules
            $("#job").validate({
                 rules: {
                        jobtype: {
                        required: true },
                        account: {
                        required: true,
                        minlength: 8 },
                        phone: {
                        required: true,
                        minlength: 7 },
                        comment: {
                        required: true,
                        minlength: 5 },
                        available: {
                        required: true,
                        minlength: 3 }
                        },
                messages: {
                        jobtype: {
                        required: "Select a job type" },
                        account: {
                        required: "Enter account in correct format" },
                        phone: {
                        required: "Enter phone number" },
                        comment: {
                        required: "Enter WIP details" },
                        available: {
                        required: "Enter an available timeframe" }
                        },
                submitHandler: function(form) {
//                        alert("Submitting Job");
                        $(form).ajaxSubmit({
                                        url: 'response.php',
                                        type: 'POST',
                                        data: {
                                        jobtype: $("#jobtype").val(),
                                        account: $("#account").val(),
                                        phone: $("#phone").val(),
                                        comment: $("#comment").val(),
                                        available: $("#available").val(),
                                        },
                                        dataType: 'json',
                                                cache: false,
                                        timeout: 7000,
                                        success: function(data) {
                                        $('form #schedTable').html(data.msg).fadeIn('fast');
                                }
                        });
                }
            });
        }
    }
    //when the dom has loaded setup form validation rules
    $(D).ready(function($) {
        JQUERY4U.UTIL.setupFormValidation();
    });
})(jQuery, window, document);
</script>
</head>
<body>
<div id="jobForm">
<form id="job" name="job" action="response.php" method="post" novalidate="novalidate">
<h1>Job Scheduling</h1>
<label>Type</label>
<select id="jobtype" name="jobtype">
  <option value="" selected>&lt;&lt; SELECT &gt;&gt;</option>
  <option value="service">Service</option>
  <option value="install">Install</option>
</select>
<label>Account</label>
<input type="text" id="account" name="account" maxlength="10" size="10">
<label>Phone</label>
<input type="text" id="phone" name="phone" maxlength="7" size="7">
<label>Comment</label>
<textarea id="comment" name="comment" rows="2" cols="40" maxlength="40"></textarea>
<label>Available</label>
<input type="text" id="available" name="available" maxlength="20" size="20">
<input id="submit" name="submit" type="submit" value="Submit" class="submit">
</form>
</div>

<div id="schedTable"></div>

</body>
</html>

response.php コードは次のとおりです。

<?php

$mydb connection info here

?>

<!DOCTYPE HTML>
<html>
<head>
<title>Test Form</title>
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>

<?php

// form inputs
$account = trim($_POST['account']);
$type = $_POST['type'];
$phone = $_POST['phone'];
$comment = trim($_POST['comment']);
$available = trim($_POST['available']);

// Insert into mysql db
$ins = mysql_query(sprintf("INSERT INTO table (type,comment,available,phone,account) VALUES ('%s','%s','%s','%s','%s')", $type,$comment,$available,$phone,$acct)) or die(mysql_error());

$sched = mysql_query(sprintf("SELECT * FROM table ORDER BY type asc"));

$return['msg'] = "
    <table border='1'>
    <tr>
    <th>Type</th>
    <th>Account</th>
    <th>Comment</th>
    </tr>";

    while($rowu = mysql_fetch_array($sched)) {
    $return['msg'] .= "
        <tr>
        <td>{$type}</td>
        <td>{$acct}</td>
        <td>{$comment}</td>
        </tr>";
        }
        $return['msg'] .= "</table>";

       // header("Content-Type: text/javascript; charset=utf-8");
       // $return['msg'] = "Testing " .$account . "works";

        header('Content-Type: application/json');
        echo json_encode($return);

?>
</body>
</html>

更新: すべての html を削除しましたが、クロムを使用している間も問題は同じです。IE 8 を使用して送信ボタンをクリックすると、テキストファイルを開くか保存するように求められます (同じフォームデータを複数回繰り返します)。

{"msg":"<table border='1'><tr>\n    <th>Type<\/th>\n    <th>Account<\/th>\n    <th>Comment<\/th>\n    <\/tr><tr>\n        <td>other<\/td>\n        <td>12345678<\/td>\n        <td>sssss<\/td>\n   <\/tr><tr>\n      <td>other<\/td>\n        <td>12345678<\/td>\n        <td>sssss<\/td>\n      <\/tr><tr>\n        <td>other<\/td>\n        <td>12345678<\/td>\n        <td>sssss<\/td>\n      <\/tr><\/table>"}

php - ajax送信機能は応答を返しませんが、データベースを更新します

3 に答える 3

Related

Reference