Javascript 由于json，Ajax表单无法工作（抛出的parsererror:SyntaxError:json.parse:json数据第1行第1列的数据意外结束）_Javascript_Php_Jquery_Json_Ajax

Javascript 由于json，Ajax表单无法工作（抛出的parsererror:SyntaxError:json.parse:json数据第1行第1列的数据意外结束）

javascript php jquery json ajax

Javascript 由于json，Ajax表单无法工作（抛出的parsererror:SyntaxError:json.parse:json数据第1行第1列的数据意外结束）,javascript,php,jquery,json,ajax,Javascript,Php,Jquery,Json,Ajax,我知道这个问题以前被问过很多次，但我已经尝试了所有的解决方案，但没有任何效果，所以我的问题是我无法使用ajax从服务器加载json响应我的script.js在js文件夹中，我的sendMail.php在includes文件夹中，而index.php在根目录中文件夹也当我提交一些信息时，状态为200表示一切正常，但由于json响应，我无法用我的php代码检查它们 index.php <!DOCTYPE html> <html> <head> <ti

我知道这个问题以前被问过很多次，但我已经尝试了所有的解决方案，但没有任何效果，所以我的问题是我无法使用ajax从服务器加载

json

响应我的

script.js

在js文件夹中，我的

sendMail.php

在includes文件夹中，而

index.php

在根目录中文件夹也当我提交一些信息时，状态为200表示一切正常，但由于

json

响应，我无法用我的php代码检查它们

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>

        <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>


预订
时辰
1.
2.
预定桌子

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');
  }
});
  });
});

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

$（文档）.ready（函数（）{
$（“#邮件提交”）。单击（功能（事件）{
event.preventDefault（）；
$.ajax({
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“JSON”，
url:'includes/sendMail.php'，
键入：“POST”，
数据：$（'#保留表单'）。序列化（），
发送前：函数（xhr）{
$（'#mail submit'）.html（'SENDING…'）；
},
成功：功能（响应）{
如果（代表，东南）{
警报（响应）；
如果（响应['signal']='ok'）{
$（'#检查表单'）.html（''+response['res-msg']+''）；
}
否则{
$（'#检查表单'）.html（''+response['res-msg']+''）；
}
}
},
错误：函数（xhr、状态、抛出）{
警报（“xhr:+xhr+”状态：“+status+”抛出：“+抛出”）；
$（“#检查表单”）.html（'发生错误，请重试'）；
},
完成：函数（）{
$（'#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);
}   
?>

基本上，表单数据需要不同的序列化方法。这里也提到了类似的事情：

下面是您应该用于JS的代码。请注意，正在使用serializeObject而不是serialize。我无法执行PHP代码，但您面临的序列化问题现在将得到修复，这也将修复您的PHP代码

$.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');
  }
});
  });
});

$.fn.serializeObject=函数（）
{
var o={}；
var a=this.serializeArray（）；
$.each（a，function（）{
if（o[this.name]！==未定义）{
如果（！o[this.name].push）{
o[this.name]=[o[this.name]]；
}
o[this.name].push（this.value | |“”）；
}否则{
o[this.name]=this.value | |“”；
}
});
返回o；
};
$（文档）.ready（函数（）{
$（“#邮件提交”）。单击（功能（事件）{
event.preventDefault（）；
var d=$（“#保留形式”）.serializeObject（）；
d=JSON.stringify（d）；
$.ajax({
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“JSON”，
url:'includes/sendMail.php'，
键入：“POST”，
数据：d，
发送前：函数（xhr）{
$（'#mail submit'）.html（'SENDING…'）；
},
成功：功能（res）{
如果（res）{
var-response=parseJSON（res）；
警报（响应）；
如果（响应['signal']='ok'）{
$（'#检查表单'）.html（''+response['res-msg']+''）；
}
否则{
$（'#检查表单'）.html（''+response['res-msg']+''）；
}
}
},
错误：函数（xhr、状态、抛出）{
警报（“xhr:+xhr+”状态：“+status+”抛出：“+抛出”）；
$（“#检查表单”）.html（'发生错误，请重试'）；
},
完成：函数（）{
$（'#mail submit'）.html（'BOOK A TABLE'）；
}
});
});
});

在此处使用HTML/JS代码：

希望这有帮助

表单数据基本上需要不同的序列化方法。这里也提到了类似的事情：

$.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');
  }
});
  });
});

$.fn.serializeObject=函数（）
{
var o={}；
var a=this.serializeArray（）；
$.each（a，function（）{
if（o[this.name]！==未定义）{
如果（！o[this.name].push）{
o[this.name]=[o[this.name]]；
}
o[this.name].push（this.value | |“”）；
}否则{
o[this.name]=this.value | |“”；
}
});
返回o；
};
$（文档）.ready（函数（）{
$（“#邮件提交”）。单击（功能（事件）{
event.preventDefault（）；
var d=$（“#保留形式”）.serializeObject（）；
d=JSON.stringify（d）；
$.ajax({
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“JSON”，
url:'includes/sendMail.php'，
键入：“POST”，
数据：d，
发送前：函数（xhr）{
$（'#mail submit'）.html（'SENDING…'）；
},
成功：功能（res）{
如果（res）{
var-response=parseJSON（res）；
警报（响应）；
如果（响应['signal']='ok'）{
$（'#检查表单'）.html（''+response['res-msg']+''）；
}
否则{
$（'#检查表单'）.html（''+response['res-msg']+''）；
}
}
},
错误：函数（xhr、状态、抛出）{
警报（“xhr:+xhr+”状态：“+status+”抛出：“+抛出”）；
$（“#检查表单”）.html（'发生错误，请重试'）；
},
完成：函数（）{
$（'#mail submit'）.html（'BOOK A TABLE'）；
}
});
});
});

在此处使用HTML/JS代码：

希望这有帮助

我已经测试了您的代码，我认为您的php脚本（sendMail.php）第2行有问题（if（isset（$\u POST['mail-submit']）），其中“mail submit”没有序列化（**因为序列化不包括submit按钮值），这就是为什么代码没有首先实现if