doudi4137
2018-08-25 16:52
浏览 122
已采纳

由于json,Ajax表单无效(抛出parsererror:SyntaxError:JSON.parse:JSON数据第1行第1列的意外数据结尾)

I know this question has been asked a lot before but i've tried all the solutions and nothing worked for me so my problem is that i can not load json response from the server using ajax i have my script.js in a js folder and my sendMail.php in includes folder and the index.php is in root folder also when i submit some infos the status is 200 means all ok but also i can not check them with my php code because of json response

index.php

<!DOCTYPE html>
<html>
<head>
    <title>Booking</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="js/script.js"></script>
</head>
<body>
    <form action="includes/sendMail.php"  method="POST" name="reservation-form"  id="reservation-form">
        <div>
            <select class="select-dropbox" name="mail-hour">
                <option value="" disabled selected>Hour</option>
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
        </div>

        <div>
            <input type="text" name="mail-phone" placeholder="Phone Number"
            >
        </div>
        <div>
            <input type="text" name="mail-email" placeholder="Email Address" >
        </div>
        <div>
            <textarea name="mail-msg" placeholder="Your Message"  ></textarea>
        </div>
        <div id="check-form">
        </div>
        <div>
            <button id="mail-submit" name="mail-submit" type="submit">BOOK A TABLE</button>
        </div>
    </form>
</body>
</html>

script.js

$(document).ready(function(){
  $('#mail-submit').click(function(event){
    event.preventDefault();
    $.ajax({
      contentType: "application/json; charset=utf-8",
      dataType: 'JSON',
      url: 'includes/sendMail.php',
      type: 'POST',
      data: $('#reservation-form').serialize(),
      beforeSend: function(xhr){
        $('#mail-submit').html('SENDING...');
      },
      success: function(response){
       if(respo,se){
        alert(response);
        if(response['signal'] == 'ok'){
         $('#check-form').html('<div>'+ response['res-msg']  +'</div>');

       }
       else{
        $('#check-form').html('<div>'+ response['res-msg'] +'</div>');
      }
    }
  },
  error: function(xhr, status, thrown){
    alert("xhr: "+xhr+" status: "+status+" thrown: "+thrown);
    $('#check-form').html('<div>An Error occurs. Please try again.</div>');
  },
  complete: function(){

    $('#mail-submit').html('BOOK A TABLE');
  }
});
  });
});

sendMail.php

<?php
if (isset($_POST['mail-submit'])) {
    $hour = trim($_POST['mail-hour']);
    $phone = trim($_POST['mail-phone']);
    $email = trim($_POST['mail-email']);
    $message = trim($_POST['mail-msg']);
    if($hour != null && $phone != null && $email != null){
        if(!filter_var($email, FILTER_VALIDATE_EMAIL)) {
            $signal = 'bad';
            $msg = 'Invalid email. Please check';
        }
        else {
            $signal = 'ok';
            $msg = 'Form submitted';
        }
    }
    else{
        $signal = 'bad';
        $msg = 'Please fill in all the fields.';
    }
    $data = array(
        'signal' => $signal,
        'res-msg' => $msg
    );
    echo json_encode($data);
}   
?>

JSON ERROR

UPLOADING DATA IS FINE

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • doudong2149 2018-08-25 18:08
    已采纳

    I've tested your code and I think problem in your php script (sendMail.php) at line: 2 (if (isset($_POST['mail-submit']))), where "mail-submit" was not serialized (**As serialize does not include submit button value), that's why code was not fulfilling first if condition and giving error. So, if you use "mail-email" instead of "mail-submit" ((if (isset($_POST['mail-email'])))), I think it'll work.

    Or you can change your script a little bit like below:

    index.php

            <div>
            <input type="hidden" id="mail-submit-hidden" name="mail-submit" value="0" >
            <button id="mail-submit" type="submit">BOOK A TABLE</button>
        </div>
    </form>
    

    script.js

    event.preventDefault();
    $('#mail-submit-hidden').val('1');
    $.ajax({
    

    Please have a try.

    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • duanli0162 2018-08-25 17:54

    You basically need a different serialization method for your form data. Something similar mentioned here: Convert form data to JSON object

    Below is the code that you should use for your JS. Notice serializeObject being used instead of serialize. I was not able to execute the PHP code, but the serialization issue you are facing will be fixed now and that should fix your PHP code as well.

    $.fn.serializeObject = function()
    {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };
    
    
    $(document).ready(function(){
      $('#mail-submit').click(function(event){
        event.preventDefault();
        var d = $('#reservation-form').serializeObject();
        d = JSON.stringify(d);
        $.ajax({
          contentType: "application/json; charset=utf-8",
          dataType: 'JSON',
          url: 'includes/sendMail.php',
          type: 'POST',
          data: d,
          beforeSend: function(xhr){
            $('#mail-submit').html('SENDING...');
          },
          success: function(res){
           if(res){
            var response=parseJSON(res);
            alert(response);
            if(response['signal'] == 'ok'){
             $('#check-form').html('<div>'+ response['res-msg']  +'</div>');
    
           }
           else{
            $('#check-form').html('<div>'+ response['res-msg'] +'</div>');
          }
        }
      },
      error: function(xhr, status, thrown){
        alert("xhr: "+xhr+" status: "+status+" thrown: "+thrown);
        $('#check-form').html('<div>An Error occurs. Please try again.</div>');
      },
      complete: function(){
    
        $('#mail-submit').html('BOOK A TABLE');
      }
    });
      });
    });
    

    Working HTML/JS code here: https://jsfiddle.net/7jm568ay/5/

    Hope this helps!

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题