AJAX请求后的JQuery确认对话框

时间:2016-06-23 14:49:35

标签: javascript php jquery ajax

我需要在服务器端验证具有给定注册号的人是否已经在数据库中。如果此人已经注册,那么我会正常进行程序流程。但是,如果该号码尚未注册,那么我想显示一个确认对话框,询问运营商是否想要注册一个输入号码的新人,如果运营商回答是,则该人员将被注册在其提交的表格上通知该号码。

我已经尝试了

服务器端(PHP):

if (!$exists_person) {
  $resp['success'] = false;
  $resp['msg'] = 'Do you want to register a new person?';
  echo json_encode($resp);
}

客户方:

function submit(){
  var data = $('#myForm').serialize();

  $.ajax({
      type: 'POST'
      ,dataType: 'json'
      ,url: 'myPHP.php'
      ,async: 'true'
      ,data: data
      ,error: function(response){
        alert('response');
      }
  });
  return false;
}

我甚至无法看到警报,这是我想要将确认对话框放在服务器端写的消息。其他问题,如何重新提交附加操作员答案的整个表单,以便服务器可以检查答案是否为是注册这个新人?

修改

我能够以这种方式解决问题:

服务器端(PHP):

$person = find($_POST['regNo']);
if ($_POST['register_new'] === 'false' && !$person) {
    $resp['exists'] = false;
    $resp['msg'] = 'Do you want to register a new person?';
    die(json_encode($resp)); //send response to AJAX request on the client side
} else if ($_POST['register_new'] === 'true' && !$person) {
    //register new person
    $person = find($_POST['regNo']);
}

if($person){
    //proceed normal program flow
}

客户方:

function submit(e) {
    e.preventDefault();
    var data = $('#myForm').serialize();
    var ajax1 = $.ajax({
        type: 'POST'
        , dataType: 'json'
        , async: 'true'
        , url: 'myPHP.php'
        , data: data
        , success: function (response) {
            if (!response.exists && confirm(response.msg)) {
                document.getElementById('register_new').value = 'true'; //hidden input
                dados = $('#myForm').serialize(); //reserialize with new data
                var ajax2 = $.ajax({
                    type: 'POST'
                    , dataType: 'json'
                    , async: 'true'
                    , url: 'myPHP.php'
                    , data: data
                    , success: function () {
                        document.getElementById('register_new').value = 'false';
                        $('#myForm').unbind('submit').submit();
                    }
                });
            } else if (response.success) {
                alert(response.msg);
                $('#myForm').unbind('submit').submit();
            }
        }
    });
}

3 个答案:

答案 0 :(得分:2)

您的PHP似乎没有任何问题。

问题是(1)您正在错误回调中进行提醒,并且您的请求没有失败,因此您无法看到提醒。 (2)您正在警告字符串'response'而不是变量response

值得注意的是,您应该使用.done().fail()承诺方法(http://api.jquery.com/jquery.ajax/#jqXHR)。

这是固定的JS:

function submit() {

  var data = $('#myForm').serialize();

  // Same as before, with the error callback removed
  var myAjaxRequest = $.ajax({
    type: 'POST',
    dataType: 'json',
    url: 'myPHP.php',
    async: 'true',
    data: data
  });

  // The request was successful (200)
  myAjaxRequest.done(function(data, textStatus, jqXHR) {
    // The data variable will contain your JSON from the server
    console.log(data);
    // Use a confirmation dialog to ask the user your question
    // sent from the server
    if (confirm(data.msg)) {
      // Perform another AJAX request
    }
  });

  // The request failed (40X)
  myAjaxRequest.fail(function(jqXHR, textStatus, errorThrown) {
    console.log(errorThrown);
  });

  return false;
}

此外,您正在设置状态'在PHP中并检查JS(我推测)。您要做的是从服务器设置HTTP状态代码,如下所示:

if (!$exists_person) 
{
    $resp['msg'] = 'Do you want to register a new person?';

    // 400 - Bad Request
    http_response_code(400);

    echo json_enconde($resp);
}

然后,jQuery将根据您回复的状态代码确定请求是否失败。 200是一个成功的请求,400个数字失败。

点击此页面查看完整列表:https://httpstatuses.com/

答案 1 :(得分:1)

好的,这是一个两部分问题;我会尽力回答这两个部分:

第1部分:如何检测成功是否为false并触发确认弹出窗口?

在jQuery.ajax中,基于响应代码触发错误处理程序。这可能不是你想要的。您可以使用成功处理程序并测试值res.success以查看它是真还是假。这将是:

function submit(e) {
  e.preventDefault();

  var data = $('#myForm').serialize();

  $.ajax({
    type: 'POST',
    dataType: 'json',
    url: 'myPHP.php',
    async: 'true',
    data: data
  }).done(function(res) {
    if (!res.success) {
      alert(res.msg);
    }
  });
}

第2部分:如何使用确认重新提交?

使用我们之前的代码,我们将进行一些更改,允许submit()传递参数registerNew。如果registerNew为真,我们将它作为参数传递给PHP中的ajax处理程序,因此它知道我们想要注册一个新人。 Javascript看起来像这样:

function submit(e, registerNew) {
  if (e) e.preventDefault();

  var data = $('#myForm').serialize();
  var ajax_options = {
    type: 'POST',
    dataType: 'json',
    url: 'myPHP.php',
    async: 'true',
    data: data
  };

  ajax_options.data.register_new = !!registerNew;

  $.ajax(ajax_options).done(function(res) {
    if (!res.success && confirm(res.msg)) {
      submit(null, true);
    }
  });
}

正如您在此处所看到的,我们在ajax选项中的数据中传递了一个新的register_new参数。现在我们需要在PHP端检测到这一点,这很容易看起来像这样(这在你的php ajax处理程序中):

if ($_POST["register_new"]) {
  // new user registration code goes here
} else {
  // your existing ajax handler code
}

答案 2 :(得分:0)

在提交功能中添加确认

function submit(){
  var data = $('#myForm').serialize();
if (confirm('Are you ready?')) {
  $.ajax({
      type: 'POST'
      ,dataType: 'json'
      ,url: 'myPHP.php'
      ,async: 'true'
      ,data: data
      ,error: function(response){
        alert('response');
      }
  });
 }
  return false;
}