无法通过ajax提交数据答案

【问题标题】：Not able to submit data through ajax无法通过ajax提交数据
【发布时间】：2017-10-24 16:57:51
【问题描述】：

我正在尝试使用 PHP 和 ajax 将数据提交到 MySQL 数据库，但它没有提交数据，当我尝试使用默认页面重新加载方法提交数据时，它正在提交数据可能是我的 ajax 代码中存在一些问题。请在这方面指导我。

HTML 代码：

<form method="POST" id="custForm" class="addcustform">
                        <div class="header">
                            <h2>
                                <strong>ADD CUSTOMER</strong>
                                <span class="pull-right sys-id">System ID - <input type="text" name="sys_id_input" class="sys_id_input" /></span>
                            </h2>
                        </div>
                        <div class="body">
                            <h2 class="card-inside-title">Personal Detials</h2>
                            <div class="row clearfix">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Customer Name</label>
                                        <div class="form-line">
                                            <input type="text" name="cust_name" class="form-control" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Email</label>
                                        <div class="form-line">
                                            <input type="email" name="cust_email" class="form-control" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row clearfix">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Mobile Number</label>
                                        <div class="form-line">
                                            <input type="text" name="cust_mobile" class="form-control mobile-phone-number">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Address</label>
                                        <div class="form-line">
                                            <input type="text" name="cust_address" class="form-control" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row clearfix">
                                <div class="col-sm-6">
                                    <label>Visa Type</label>
                                    <div class="btn-group bootstrap-select form-control show-tick select-dropdown-trick-container">
                                        <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="-- Please select --">
                                            <span class="filter-option pull-left select-dropdown-trick-text">-- Please select --</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span>
                                            <input type="hidden" class="dropdown-input" name="cust_visa" />
                                        </button>
                                        <div class="dropdown-menu open">
                                            <ul class="dropdown-menu inner select-dropdown-trick" role="menu">
                                                <li data-original-index="0" class="selected">
                                                    <a tabindex="0" class="" style="" data-tokens="null">
                                                        <span class="text">-- Please select --</span><span class="glyphicon glyphicon-ok check-mark"></span>
                                                    </a>
                                                </li>
                                                <li data-original-index="1">
                                                    <a tabindex="0" class="" style="" data-tokens="null">
                                                        <span class="text">Visit Visa</span><span class="glyphicon glyphicon-ok check-mark"></span>
                                                    </a>
                                                </li>
                                                <li data-original-index="2">
                                                    <a tabindex="0" class="" style="" data-tokens="null">
                                                        <span class="text">Residental Visa</span><span class="glyphicon glyphicon-ok check-mark"></span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Nationality</label>
                                        <div class="btn-group bootstrap-select form-control show-tick select-dropdown-trick-container">
                                            <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="-- Please select --">
                                                <span class="filter-option pull-left select-dropdown-trick-text">-- Please select --</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span>
                                                <input type="hidden" class="dropdown-input" name="cust_nationality" />
                                            </button>
                                            <div class="dropdown-menu open large-list-short">
                                                <ul class="dropdown-menu inner select-dropdown-trick" role="menu">
                                                    <?php include 'country_list.php'; ?>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <h2 class="card-inside-title">Car Detials</h2>
                            <div class="row clearfix">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Car Modal</label>
                                        <div class="btn-group bootstrap-select form-control show-tick select-dropdown-trick-container">
                                            <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="-- Please select --">
                                                <span class="filter-option pull-left select-dropdown-trick-text">-- Please select --</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span>
                                                <input type="hidden" class="dropdown-input" name="cust_cars" />
                                            </button>
                                            <div class="dropdown-menu open large-list-short">
                                                <ul class="dropdown-menu inner select-dropdown-trick" role="menu">
                                                    <?php include 'cars_list.php'; ?>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Car Color</label>
                                        <div class="btn-group bootstrap-select form-control show-tick select-dropdown-trick-container">
                                            <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="-- Please select --">
                                                <span class="filter-option pull-left select-dropdown-trick-text">-- Please select --</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span>
                                                <input type="hidden" class="dropdown-input" name="car_color" />
                                            </button>
                                            <div class="dropdown-menu open">
                                                <ul class="dropdown-menu inner select-dropdown-trick" role="menu">
                                                    <li data-original-index="0" class="selected">
                                                        <a tabindex="0" class="" style="" data-tokens="null">
                                                            <span class="text">-- Please select --</span><span class="glyphicon glyphicon-ok check-mark"></span>
                                                        </a>
                                                    </li>
                                                    <li data-original-index="1">
                                                        <a tabindex="0" class="" style="" data-tokens="null">
                                                            <span class="text">White</span><span class="glyphicon glyphicon-ok check-mark"></span>
                                                        </a>
                                                    </li>
                                                    <li data-original-index="2">
                                                        <a tabindex="0" class="" style="" data-tokens="null">
                                                            <span class="text">Black</span><span class="glyphicon glyphicon-ok check-mark"></span>
                                                        </a>
                                                    </li>
                                                    <li data-original-index="2">
                                                        <a tabindex="0" class="" style="" data-tokens="null">
                                                            <span class="text">Silver</span><span class="glyphicon glyphicon-ok check-mark"></span>
                                                        </a>
                                                    </li>
                                                    <li data-original-index="2">
                                                        <a tabindex="0" class="" style="" data-tokens="null">
                                                            <span class="text">Blue</span><span class="glyphicon glyphicon-ok check-mark"></span>
                                                        </a>
                                                    </li>
                                                    <li data-original-index="2">
                                                        <a tabindex="0" class="" style="" data-tokens="null">
                                                            <span class="text">Red</span><span class="glyphicon glyphicon-ok check-mark"></span>
                                                        </a>
                                                    </li>
                                                    <li data-original-index="2">
                                                        <a tabindex="0" class="" style="" data-tokens="null">
                                                            <span class="text">Brown</span><span class="glyphicon glyphicon-ok check-mark"></span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Plate Number</label>
                                        <div class="form-line">
                                            <input type="text" name="plate_number" class="form-control plate-input" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Start KM</label>
                                        <div class="form-line">
                                            <input type="text" name="start_km" class="form-control" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <h2 class="card-inside-title">Rental Detials</h2>
                            <div class="row clearfix">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Start Date</label>
                                        <div class="form-line">
                                            <input type="text" name="start_date" class="form-control date-input" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>End Date</label>
                                        <div class="form-line">
                                            <input type="text" name="end_date" class="form-control date-input" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row clearfix">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Rental Amount</label>
                                        <div class="form-line">
                                            <input type="text" name="rental_amount" class="form-control" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Security Amount</label>
                                        <div class="form-line">
                                            <input type="text" name="scurity_amount" class="form-control" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                             <div class="row clearfix">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Rental Company</label>
                                        <div class="btn-group bootstrap-select form-control show-tick select-dropdown-trick-container">
                                            <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="-- Please select --">
                                                <span class="filter-option pull-left select-dropdown-trick-text">-- Please select --</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span>
                                                <input type="hidden" class="dropdown-input" name="rental_company" />
                                            </button>
                                            <div class="dropdown-menu open large-list-short">
                                                <ul class="dropdown-menu inner select-dropdown-trick" role="menu">
                                                    <?php include 'rental_company_list.php'; ?>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row clearfix">
                                <div class="col-sm-2">
                                    <div class="form-group">
                                        <button class="btn bg-red btn-block btn-lg waves-effect btn-addcust" name="btn-addcust" type="submit">Save Details</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <form>

PHP 代码：

if(isset($_POST['btn-addcust'])) {
  # code...
  $sys_id_input = $_POST['sys_id_input'];
  $cust_name = $_POST['cust_name'];
  $cust_email = $_POST['cust_email'];
  $cust_mobile = $_POST['cust_mobile'];
  $cust_address = $_POST['cust_address'];
  $cust_visa = $_POST['cust_visa'];
  $cust_nationality = $_POST['cust_nationality'];
  $cust_cars = $_POST['cust_cars'];
  $car_color = $_POST['car_color'];
  $plate_number = $_POST['plate_number'];
  $start_km = $_POST['start_km'];
  $start_date = $_POST['start_date'];
  $end_date = $_POST['end_date'];
  $rental_amount = $_POST['rental_amount'];
  $scurity_amount = $_POST['scurity_amount'];
  $rental_company = $_POST['rental_company'];

  $sql = "CREATE TABLE IF NOT EXISTS `$rental_company` (
            id INT(11) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
            sys_id_input VARCHAR(255) NOT NULL,
            cust_name VARCHAR(255) NOT NULL,
            cust_email VARCHAR(255) NOT NULL,
            cust_mobile VARCHAR(255) NOT NULL,
            cust_address VARCHAR(255) NOT NULL,
            cust_visa VARCHAR(255) NOT NULL,
            cust_nationality VARCHAR(255) NOT NULL,
            cust_cars VARCHAR(255) NOT NULL,
            car_color VARCHAR(255) NOT NULL,
            plate_number VARCHAR(255) NOT NULL,
            start_km VARCHAR(255) NOT NULL,
            start_date VARCHAR(255) NOT NULL,
            end_date VARCHAR(255) NOT NULL,
            rental_amount VARCHAR(255) NOT NULL,
            scurity_amount VARCHAR(255) NOT NULL,
            rental_company VARCHAR(255) NOT NULL
          )";

  $db_con->exec($sql);

  $sql = "INSERT INTO `$rental_company` (sys_id_input, cust_name, cust_email, cust_mobile, cust_address, cust_visa, cust_nationality, cust_cars, car_color, plate_number, start_km, start_date, end_date, rental_amount, scurity_amount, rental_company) VALUES ('$sys_id_input', '$cust_name', '$cust_email', '$cust_mobile', '$cust_address', '$cust_visa', '$cust_nationality', '$cust_cars', '$car_color', '$plate_number', '$start_km', '$start_date', '$end_date', '$rental_amount', '$scurity_amount', '$rental_company')";

  $db_con->exec($sql);

  echo "ok";

}

Ajax 代码：

$('.addcustform').submit(function(){

    var data = $('#custForm').serialize();

    $.ajax({

        type : 'POST',
        url  : '../include/addcust.php',
        data : data,
        beforeSend: function()
        {   
            //$("#alert").fadeOut();
            $(".btn-addcust").html('Saving ...');
        },
        success : function(response)
        {                        
            if(response=="ok"){
                setTimeout( function(){ 
                    // Do something after 1 second 
                    $(".btn-addcust").html('Success');
                }  , 1000 );
            }
            //alert(data);
        }
    });

    return false;

});

我们将不胜感激。谢谢

【问题讨论】：

您也可以添加您的 HTML 吗？如果至少您的 AJAX 请求正在启动，您能否打开控制台并检查网络选项卡？
检查你的 url ajax 调用路径是否正确。
请显示您的错误...
因为它使用 ajax 我看不到错误并且文件路径没问题我检查了两次并添加了 HTML 代码。
当我测试时，你的 ajax 没有处理发送+响应（空 JS 数据错误）。请尝试将data : data, 与data : {data}, 和success : function(response) { ... your stuff ... } 修改为success : function(response) { $('#response').html(response); }。然后，在 PHP 方面，只需在表单顶部执行$data = $_POST['data']; print_r($data); 添加 <div id="response"></div> 即可查看将返回的内容并告诉我们...

标签： javascript php jquery mysql ajax

【解决方案1】：

如果您使用 chrome，您可以按 F12，转到 Network，然后提交表单并查看新添加的行，您的服务器的响应是什么样的（根据您发布的代码应该是 ok )。也许您将数据提交到了错误的 URL（尝试使用像 /include/addcust.php 这样的绝对 URL）。

你还没有为你的按钮设置一个值，所以 jQuery 不会让它生效，你的第一行 PHP 会产生一个false。因此，只需将 value="submit" 之类的内容添加到您的提交按钮即可。

【讨论】：

这应该是他的评论下方的评论，他声明他无法检查错误，因为他正在使用 AJAX
在那里您可以单击 addcust.php 并查看响应，但您的服务器似乎正在将您的请求重定向到其他地方（参见状态 302）
那是因为我使用的是绝对文件路径。用正确的路径检查这个。 prntscr.com/fbisd5 prntscr.com/fbisiz
你能查看标题并检查响应代码是否为 200 吗？如果是其他问题，则说明有问题（响应代码可能会缩小范围）
我已更新答案以包含新的可能解决方案。

【解决方案2】：

表单的操作是它自己的页面，您说页面在提交时刷新。好像你的 javascript 并没有阻止表单的默认操作，所以即使你的 AJAX 代码工作，页面在完成之前已经刷新。

您需要在 .submit() 函数中添加 event.preventDefault();。

有人问了一个类似的问题： Ajax Form submit with preventDefault

您还可以在此处阅读有关防止默认操作的更多信息：

https://api.jquery.com/submit/

https://api.jquery.com/event.preventdefault/

$('.addcustform').submit(function(){
    event.preventDefault();
    var data = $('#custForm').serialize();

    $.ajax({

        type : 'POST',
        url  : '../include/addcust.php',
        data : data,
        beforeSend: function()
        {   
            //$("#alert").fadeOut();
            $(".btn-addcust").html('Saving ...');
        },
        success : function(response)
        {                        
            if(response=="ok"){
                setTimeout( function(){ 
                    // Do something after 1 second 
                    $(".btn-addcust").html('Success');
                }  , 1000 );
            }
            //alert(data);
        }
    });

    return false;

});

【讨论】：

嗨@David 感谢您的回答，但如果您阅读了我的问题，我说如果我提交带有页面重新加载的表单是成功的，但是当我尝试使用 ajax 时，我无法提交。所以，我知道如何防止在表单提交时重新加载页面，但是我在没有页面重新加载的情况下提交表单时遇到了问题。
嗨@QararUlHassan，很抱歉错过了这个细节。我玩过代码，发现了一个可能的问题。上面的 ajax 是包裹在 $( document ).ready(function() {....}); ?
将按钮类型更改为“按钮”不提交，然后监听点击。我用这个来获取表单数据，但不是你上面的。 $( ".addcustform" ).on('click', function() { var data = $('#custForm').serialize(); console.log(data); $.ajax({ .... } ); });

【解决方案3】：

改变

type="提交"

进入

type="按钮"

在您的 html 代码上

【讨论】：