Question

我正在尝试通过ajax帖子向php提交表单，但是input标签的值似乎为空。

我已经交叉检查了已定义的类和ID，看来还可以。我不知道我的错误来自哪里。这是代码

index.html

<div class="modal">
  <div class="first">
  <p>Get notified when we go <br><span class="live">LIVE!</span></p>
  <input type="text" class="input" id="phone" placeholder="Enter your email adress" />
  <div class="arrow">
    <div class="error" style="color:red"></div>
    <div class="validator"></div>
  </div>
  <div class="send">
    <span>Subscribe</span>
  </div>
  </div>
  <div class="second">
    <span>Thank you for<br />subscribing!</span>
  </div>

</div>
  <script src='jquery-3.3.1.min.js'></script>



    <script  src="script.js"></script>

script.js

$(document).ready(function(){
  function validatePhone(phone) { 
    var re = /^((\+[1-9]{1,4}[ \-]*)|(\([0-9]{2,3}\)[ \-]*)|([0-9]{2,4})[ \-]*)*?[0-9]{3,4}?[ \-]*[0-9]{3,4}?$/;
    return re.test(phone);
  } 

  $('.input').on('keyup',function(){
    var formInput = $('.input').val();
    if(validatePhone(formInput)){

      $('.validator').removeClass('hide');
      $('.validator').addClass('valid');

      $('.send').addClass('valid');
    }
    else{
      $('.validator').removeClass('valid');
      $('.validator').addClass('hide');

      $('.send').removeClass('valid');
    }
  });

  var phone = $('#phone').val();

  var data =
  'phone='+phone;
  $('.send').click(function(){
    $.ajax({
      type:"POST",
      url:"subscribe.php",
      data: data,
      success: function(data){
        alert(data);
        if (data ==1) {
          $('.modal').addClass('sent');
        }else{
          $('.error').html("Error String:" +data);
        }
      }
    })

  });
});

subscribe.php

```php
$phone = htmlentities($_POST['phone']);

if (!empty($phone)) {
    echo  1;
}else{
    echo "Phone number cannot be empty";
}
```

我得到的只是一个带有错误代码的空结果。有人可以帮我解决我犯的错误吗？谢谢

Answer 1

如果您通过ajax发送POST请求，则需要将数据格式化为JSON对象，请参见下面的代码。

替换此：

var data =
  'phone='+phone;

与此：

var data = {phone: phone};

Answer 2

更改下一个

JS ：

$('.send').click(function(){
    $.ajax({
      type:"POST",
      url:"subscribe.php",
      data: data,
      success: function(data){
        alert(data);
        if (data ==1) {
          $('.modal').addClass('sent');
        }else{
          $('.error').html("Error String:" +data);
        }
      }
    })

  });

到

  $('.send').click(function(){ 
  var data = $('#phone').val();
    $.ajax({
      type:"POST",
      url:"subscribe.php",
      data: {phone: data},
      success: function(data){
        alert(data);
        if (data ==1) {
          $('.modal').addClass('sent');
        }else{
          $('.error').html("Error String:" +data);
        }
      }
    }); 
  });

Ajax HTML输入值显示为空

2 个答案: