使用 ajax 提交结帐表单
Posted
技术标签:
【中文标题】使用 ajax 提交结帐表单【英文标题】：Checkout Form submission using ajax 【发布时间】：2019-06-23 12:59:51 【问题描述】：我想使用 ajax 提交我的表单，我的脚本代码也没有任何错误，我的 php 也没有任何错误，但是当我单击提交按钮时没有任何反应，只是表单将清空，否则没有任何反应，数据不会存储在数据库中。我不知道错误是什么。我不知道如何找到它，谁能帮我解决这个问题？
<div class="container-fluid">
<h3 class="alert alert-success" align="center">CHECKOUT FORM</h3>
<form id="checkout_form">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-4">
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="name" name="name">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="text" class="form-control" id="email" name="email">
</div>
<div class="form-group">
<label for="address">Address:</label>
<input type="text" class="form-control" id="address" name="address">
</div>
<div class="form-group">
<label for="city">City:</label>
<input type="text" class="form-control" id="city" name="city">
</div>
<div class="form-group">
<label for="city">State:</label>
<input type="text" class="form-control" id="state" name="state">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="card">Card Name:</label>
<input type="text" class="form-control" id="card_name" name="card_name">
</div>
<div class="form-group">
<label for="cvv">CVV:</label>
<input type="text" class="form-control" id="cvv" name="cvv">
</div>
<div class="form-group">
<label for="card_num">Card Number:</label>
<input type="text" class="form-control" id="card_number" name="card_number">
</div>
<div class="form-group">
<label for="expired_month">Expire Month:</label>
<input type="text" class="form-control" id="expired_month" name="expired_month">
</div>
<div class="form-group">
<label for="zip">Zip Code:</label>
<input type="text" class="form-control" id="zip_code" name="zip_code">
</div>
<input type="submit" name="submit" class="btn btn-success" value="CHECKOUT" action = "checkout" id="submit">
</div>
</div>
</form>
</div>
脚本代码
<script>
$(document).ready(function()
$('#submit').click(function()
var name = $('#name').val();
var email = $('#email').val();
var address = $('#address').val();
var city = $('#city').val();
var state = $('#state').val();
var card_name = $('#card_name').val();
var cvv = $('#cvv').val();
var card_number = $('#card_number').val();
var expired_month = $('#expired_month').val();
var zip = $('#zip_code').val();
var data_string ='name='+ name + '&email=' + email + '&address=' + address + '&city=' + city + '&state=' + state + '&card_name=' + card_name + '&cvv=' + cvv + '&card_number=' + card_number + '&expired_month' + expired_month + '&zip' + zip_code ;
$.ajax(
url : "action1.php",
method : "POST",
data :data_string,
success:function(data)
$('#checkout_form').html("<div id='message'></div>");
$('#message').val("form submitted");
);
);
);
</script>
action1.php
<?php
include('database_connection.php');
if(isset($_POST['submit'])
$data = array(
':name' => $_POST['name'],
':email' => $_POST['email'],
':address' => $_POST ['address'],
':city' => $_POST['city'],
':state' => $_POST['state'],
':card_name' => $_POST ['card_name'],
':cvv' => $_POST['cvv'],
':card_number' => $_POST['card_number'],
':expired_month' => $_POST['expired_month'],
':zip_code'=> $_POST['zip_code']
);
$query = "INSERT INTO checkout (name,email,address,city,state,card_name,cvv,card_number,expired_month,zip_code) VALUES (:name,:email,:address,:city,:state,:card_name,:cvv,:card_number,:expired_month,:zip_code)";
$statement = $connect ->prepare($query);
if($statement->execute($data))
echo "form submitted";
?>
【问题讨论】：
尝试控制台报错console.log(data)， &zip' + zip_codes - 此行中的错误现在我删除了错误但数据未存储在数据库中 发送序列化表单而不是字符串。 ' 数据 :$("#checkout_form ").serialize();' 什么都没发生... 【参考方案1】：欢迎来到 *** @prabhu-msd
添加e.preventDefault;作为此代码下的第一行：
$('#submit').click(function()
它可以防止页面被刷新并运行您的 Ajax。在成功下添加location.reload(); 在此行之后$('#message').val("form submitted"); 以在您提交数据后刷新页面（如果您想刷新页面），否则做任何您想做的事情。
在您的 PHP 文件中，您正在使用 exit 来阻止执行查询。请删除exit。
【讨论】：
数据未存储在数据库中...我需要存储但我找不到问题所在 @PrabhuMsd 在成功下添加console.log(data) 并提供结果。其次，您在执行查询之前使用退出。请同时删除 exit。 echo $query;exit;
我已经删除了声明...但是什么都没发生，兄弟请帮助我，我是初学者【参考方案2】：
单击提交时，您的表单页面正在刷新。这样做：
$('#submit').click(function(e)
e.preventDefault;
如 cmets 中所述，还有：
echo $query;
exit; //This exit is causing the query not to run because the script stops running.
您的字段名称前有分号。删除它们：
$data = array(
'name' => $_POST['name'],
'email' => $_POST['email'],
'address' => $_POST ['address'],
'city' => $_POST['city'],
'state' => $_POST['state'],
'card_name' => $_POST ['card_name'],
'cvv' => $_POST['cvv'],
'card_number' => $_POST['card_number'],
'expired_month' => $_POST['expired_month'],
'zip_code'=> $_POST['zip_code']
);
【讨论】：
数据不存储在数据库中。帮帮我 @PrabhuMsd 您的数据未保存，因为echo $query;exit; 评论此行，然后再次检查。
我已经删除了声明...但是什么都没发生，兄弟请帮助我，我是初学者
我也应该删除插入查询中的分号吗？以上是关于使用 ajax 提交结帐表单的主要内容，如果未能解决你的问题，请参考以下文章
在 Woocommerce 3 中通过 ajax 提交并在结帐时创建订单