Question

以下是我的otp的jquery脚本。

<Script>
        $(document).ready(function(){
            $('#otp_submit').click(function(){
                var otp_insert=$('#otp_insert').val();

                $.ajax({
                    url:'smsverify.php',
                    type:'POST',
                    data:{otp_insert:otp_insert},
                     /* beforeSend: function(){
                        $('.image_loading').show();
                    },
                    complete: function(){
                        $('.image_loading').hide();
                    },*/
                    success: function(data){
                        if(data.success==1){
                            $('.hide2show').show();
                            $('html, body').animate({ scrollTop: $('.hide2show').offset().top }, 'slow');

                       }
                            else
                            {
                                    $('.result').html(data);
                            }

                    },
                    error: function() { 
                      console.error('Failed to process ajax !');
                    }
                });
            });
        });

    </Script><!-- Send Otp To the mobile number using ajax -->

这是将数据发送到smsverify.php的脚本，现在这是我的smsverify.php脚本

<?php

session_start();
$otp_password=$_POST['otp_insert'];
echo $otp_password;


if($_SESSION['otpkey']==$otp_password) {
    echo "OTP is granted using session";

} else {
    echo "otp is not granted not session";
}

?>

这是用于验证用户发送的sms otp的php脚本。

实际上脚本工作正常，但是当它返回数据时。它只显示回显消息。没有显示包含剩余注册表单的.hide2show类。

<div class="row">
                    <h4 class=""> <Strong> &nbsp;&nbsp;&nbsp;Primary Details : </Strong></h4>
                    <div class="col-md-3">
                        <label> Your Email - </label>

                    </div>
                    <div class="col-md-6">
                        <input type="text" name="email_user" id="email_user" placeholder="Enter Your Email" class="form-control">
                         <span id="error" style="display:none;color:red;">Wrong Email Id , Kindly Enter valid E-mail Id</span><i class="fa  fa-file-text-o errspan"></i>
                    </div>

                </div><!-- end of emaiol row--><label></label>
                                <div class="row">
                    <div class="col-md-3">
                        <label> Your Mobile Number - </label>
                    </div>
                    <div class="col-md-6">
                       <input type="text" name="mobile_user" id="mobile_user" placeholder="Enter Your Mobile Number ( 10 Numbers Allowed Only)" class="form-control"  required  title=" Wrong Mobile Number , Only 10 Digits Allowed" onkeypress='return isNumberKey(event)'  maxlength="10"><i class="fa fa-lg fa-mobile-phone errspan" ></i> <span id="error_mob" style="display:none;color:red;">Wrong Mobile Number Kindly Enter Valid Number</span>
                    </div>
                    <div class="col-md-3">
                        <input type="button" name="otp_send" id="otp_send" class="btn btn-info btn-block" Value="Send OTP" disabled="disabled">

                    </div>  
                </div><!-- end of emaiol row--><label></label>  
                    <img src="../assets/img/289.gif" class="image_loading" style="display:none;">
                <div class="row hide4otp" style="display:none;">
                    <div class="col-md-3">
                        <label> One Time Password - </label>
                    </div>
                    <div class="col-md-6">
                        <input type="text" name="otp_insert" id="otp_insert" placeholder="Enter One Time Password"  class="form-control" maxlength="5" ><span id="error_otp" style="display:none;color:red;">Wrong OTP , Kinldy Enter a Valid OTO Which You Have Received On Your Mobile</span>
                    </div>
                    <div class="col-md-3">
                        <input type="button" name="otp_submit" id="otp_submit" class="btn btn-danger btn-block" Value="Press Me !!" disabled="disabled">
                    </div>  
                </div><!-- end of emaiol row--><label></label>
                                    <div class="row hide2show">
                                        <h4 class=""> <Strong> &nbsp;&nbsp;&nbsp;Property Information : </Strong></h4>
                                            <div class="col-md-3">
                            <strong>Property For : </strong>
                      </div>
                                            <div class="col-md-6">
                          <select name="proerty_for" id="proerty_for" class="form-control" >
                            <option value="Sale"> For Sale</option>
                                                        <option value="Rent"> For Rent</option>
                          </select>
                                            </div>
                                    </div><!-- end of Property_for--><label></label>

This is html code for your relevnce

Answer 1

data.success正在访问对象data的success属性。但是，您没有从PHP返回对象。修改PHP以返回JSON中的对象。

<?php

session_start();
$otp_password=$_POST['otp_insert'];
$response = array();


if($_SESSION['otpkey']==$otp_password) {
    $response['success'] = 1;
    $response['message'] = "OTP is granted using session";
} else {
    $response['success'] = 0;
    $response['message'] = "OTP is not granted using session";
}
echo json_encode($response);

Answer 2

尝试以下代码，它可能适合您

<?php

session_start();
$otp_password=$_POST['otp_insert'];

if($_SESSION['otpkey']==$otp_password) {
   echo "1";
} else {
  echo "0";
}

?>

并在您的ajax响应中检查

if(data=='1'){
   // your code
}

Answer 3

success: function(data){
                        var result = $.trim(data);
                        if(result=="OTP is granted using session") {
                            $('.hide2show').show();
                            $('html, body').animate({ scrollTop: $('.hide2show').offset().top }, 'slow');


                       }
                            else
                            {
                                    $('.hide2show').hide();
                                    $('#error_otp_valid').show();
                                    console.log('Wrong OTP , Please try again Later');

                            }

                    },
                    error: function() { 
                      console.log('Failed to process ajax !');
                    }

This is my Ajax success part. thanks everyone . it helps me alot. i also learn a new things of console and trim function in jquery.

在ajax成功函数中显示隐藏的div，用于显示剩余的注册表单

3 个答案: