Question

我正在制作一个表单，我在其中添加一个文本框，交叉检查服务器上的折扣优惠券代码并进行验证。优惠券代码存储在MySQL数据库中。优惠券代码是D100，存储在数据库中。如果它是正确的，那么它会转到success.html否则会显示错误。目前通过刷新页面来实现。因此，其他字段上的键入值变为空白。我想在不刷新页面的情况下执行此操作，以便在其他字段上键入的值保持不变。我知道可以通过AJAX完成。你能帮我解决一下吗？

数据库的名称是'test'，表格是'cc'，它有两列经过。，'sno'和'couponCode'

这是我的示例代码。

//dbconfig.php
<?php
$db_hostname = 'localhost';
$db_username = 'root';
$db_password = '';
$db_name = 'test';

$dbc = mysqli_connect ($db_hostname,$db_username, $db_password,$db_name);

if (mysqli_connect_errno()) {
echo "Could not establish database connection!";
exit();
}
?>


//index.php
<html>

    <?php

    require("dbconfig.php");
    $wrongcc=""; 

    //getting value from the form text field and cross check with the value on the database
    if(isset($_POST['sub'])) {
        $cc=$_POST['coupon'];
        if(!empty($cc)) {
            $coupon=$_POST["coupon"];
            $checkcoupon = "select couponCode from cc where couponCode='$coupon'"; 
            $results_coupon = mysqli_query($dbc,$checkcoupon);

            if(mysqli_num_rows($results_coupon)>0) {
                while($row = mysqli_fetch_array($results_coupon)){  
                    $ccode=$row['couponCode'];
                }
                if($coupon==$ccode){
                    header ("Location: success.html");                          
                }    
            } 
            else {      
                $wrongcc = "Wrong coupon code entered.";
                echo $wrongcc;      
            }   
        }
    }

    ?>

    <html>
    <form action="index.php" method="post">
        <input name="coupon" type="text" size="50" maxlength="13" oninvalid="if (this.value!=''){this.setCustomValidity('<?php echo $wrongcc;?>')}"  oninput="setCustomValidity('')" />
        <input type="submit" name="sub">
    </form>

Answer 1

要实现AJAX请求，您需要在按下“提交”按钮时调用函数，并使用XMLHTTPRequest对象。

通过这个，您打开与服务器的连接，通过调用其open函数，并传递请求类型（在您的情况下为“POST”），请求的URL，以及它是否应该是异步的。可以找到有关构建其中一个对象的详细信息here。

如果优惠券匹配，而不是调用header()函数将PHP重定向到success.html的PHP代码，而是回显一个表示成功的值，并在对象的onreadystatechange()函数中检查它

如果您的值在JavaScript函数中匹配，则切换HTML元素的可见性以表示成功，或显示警报 - 同时，从您已创建的表单中删除目标，因为它将提交并重定向您。 / p>

Answer 2

你的逻辑是有缺陷的。该查询已指定输入的优惠券代码是否与来自数据库的优惠券代码匹配：where couponCode='$coupon' 所以，

if(mysqli_num_rows($results_coupon)>0) { header ("Location: success.html");

就足够了。如果你选择，使用jQuery，如下所示：

var couponVal = $('input[name=coupon]').val(); // get textfield value
$.post(checkValidity.php, {coupon: couponVal }, 
function(data, status) {
if(status == success) {
  if(parseInt(data) > 0) {
    // code here if coupon code match
  }
}
});

在checkValidity.php中，编写逻辑以检查数据库中的匹配。而不是header，请使用echo mysqli_num_rows($results_coupon)

请参阅here了解语法。

Answer 3

更新答案 - 2：（只是将两个文件放在同一个文件夹中）

步骤1：带有ajax代码的Html页面 - Ajax.html

  <html>
    <form id="form_submit">
      <input id="coupon" name="coupon" type="text" size="50" maxlength="13" />
      <input id="btn_submit" type="button" value="Submit">
    </form>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
      $("form_submit").submit(function(e){ e.preventDefault(); return false;});
      $("#btn_submit").click(function(e) { e.preventDefault();
        var coupon = $("#coupon").val();  
        // validate for emptiness
        if(coupon.length < 1 ){ alert("enter coupon value"); }
        else{ 
          $.ajax({
            url: './codeValidate.php',
            type: 'POST',
            data: {coupon: coupon},
            success: function(result){
              console.log(result);
              if(result){ window.location.href="success.html"; }
              else{ alert("Error: Failed to validate the coupon"); }
            }
          });     
        }
      });
    </script>
  </html>

步骤2：优惠券验证php文件 - codeValidate.php

<?php 
  require("dbconfig.php");

  if(isset($_POST['coupon']) && !empty($_POST['coupon']) ){
    $coupon = trim($_POST['coupon']);        
    $checkcoupon = "SELECT couponCode FROM cc WHERE couponCode='".$coupon."'"; 
    $results_coupon = mysqli_query($dbc,$checkcoupon);    
    if(mysqli_num_rows($results_coupon)) {   echo true; } 
    else { echo false; }   
  }
?>

通过Ajax进行表单验证

3 个答案: