javascript - Ajax 请求命中或未命中 PHP SQL 提交

Question

我有一个表单，在验证后，它执行两个 Ajax 请求，然后提交该表单以在 MySQL 数据库中创建一个条目。 这两个 Ajax 请求返回由 upload.php 创建的 Google 文档的 URL(链接)。

但是，当表单中填充的数据满足某些未知条件时，Ajax 请求“议程”时会遇到错误。

当手动访问相同的 GET URL 时，将返回 Google 文档的 URL(链接)。

所以最终的问题是当Ajax请求遇到错误时，我无法成功提交表单。

<小时/>

表单验证后，Ajax 请求将发送到 upload.php，然后表单通过 POST 提交到 create.php。

来自 Ajax 的响应被分配给隐藏值，以便它们可以与表单提交一起存储。

表单验证.js

submitHandler: function(form) {
$('#submitButton').button('loading');
console.log('Loading Button');

$("#cancelButton").prop("disabled", true);
console.log('Disable Button');


success1.show();
error1.hide();
var eName = $('#create_event').find('input[name="eventName"]').val();
var eDate = $('#create_event').find('input[name="eventDate"]').val();
var eType = $('#create_event').find('select[name="eventType"]').val();
var separator = "&";
var agendaURL = "http://xxxx.xxx/libraries/upload.php?fType=agnd" + separator + "eName=" + eName + separator + "eDate=" + eDate + separator + "eType=" + eType;
var minURL = "http://xxxx.xxx/libraries/upload.php?fType=min" + separator + "eName=" + eName + separator + "eDate=" + eDate + separator + "eType=" + eType;
var agendaReturn = getAgenda(agendaURL);
console.log('Called getAgenda');

agendaReturn.success(function(data) {
    $('input[name="agendaURL"]').val(data);
    console.log('Assigned agendaURL hidden');

});

var minReturn = getMin(minURL);
console.log('Called getMin');

minReturn.success(function(data) {
    $('input[name="minURL"]').val(data);
    console.log('Assigned minURL hidden');

    submitForm();
    console.log('Form submit called');

});


function submitForm() {
    console.log('Form submitting');

    $('#create_event').unbind().submit();
}

function getAgenda(agendaURL) {
    return $.ajax({
        url: agendaURL,
        type: 'get',
        dataType: 'text',
        async: true,
    });

}

function getMin(minURL) {
    return $.ajax({
        url: minURL,
        type: 'get',
        dataType: 'text',
        async: true,
    });

    }

}

create.php

include '../../libraries/library.php';
session_start();

if((!empty($_POST)) && $_POST['agendaURL'] != null) {
/**
 * Create the event in main database
 */
 $query_paramsCE  = array(
     ':eventID' => getRandom(),
     ':cCode' => getChapCode(),
     ':name' => $_POST['eventName'],
     ':date' => $_POST['eventDate'],
     ':timeStart' => $_POST['eventStart'],
     ':timeEnd' => $_POST['eventEnd'],
     ':location' => $_POST['eventLoc'],
     ':type' => $_POST['eventType'],
     ':rank' => setEventRank($_POST['eventType']),
     ':description' => $_POST['eventDescription'],
     ':agendaLink' => $_POST['agendaURL'],
     ':minutesLink' => $_POST['minURL'],
     ':creator' => getFirstLast(),
     ':creatorTimestamp' => timestamp()


 );
 $queryCE                  = " 
             INSERT INTO `events` ( 
                   eventID,
                   cCode,
                   name, 
                   date,
                   timeStart,
                   timeEnd,
                   type,
                   rank,
                   location,
                   description,
                   agendaLink,
                   minutesLink,
                   creator,
                   creatorTimestamp

             ) VALUES ( 
                   :eventID,
                   :cCode,
                   :name, 
                   :date,
                   :timeStart,
                   :timeEnd,
                   :type,
                   :rank,
                   :location,
                   :description,
                   :agendaLink,
                   :minutesLink,
                   :creator,
                   :creatorTimestamp                    
             ) 

                 ON DUPLICATE KEY UPDATE 
                    eventID = :eventID

         ";
 $createEvent = dbSubmit($createEvent, $queryCE, $query_paramsCE);

 redirect('http://xxxx.xxx/leadership/attendance/events');

}
else {
    echo "Error. Please contact an adminstrator.";
}

我附上了控制台和网页的屏幕截图:

下面的截图是Ajax请求失败的表单数据:

Answer 1

尚不完全清楚您的问题是什么，但可能导致您的agenda请求失败的问题是您没有对您的值进行编码以便在网址中使用。

所以要做的第一件事是正确编码所有值:

var agendaURL = "http://xxxx.xxx/libraries/upload.php?fType=agnd" + separator + "eName=" + encodeURIComponent(eName) + separator + ... // etc.
                                                                                           ^^^^^^^^^^^^^^^^^^^^^^^^^ here

您还可以让 jQuery 自动执行此操作，方法是发送由键值对组成的 data 值，其中键是您要发送的名称。

也无需进行同步 ajax 调用:您可以同时异步启动两者，并在两者完成后提交表单:

$.when(agendaReturn, minReturn).then(function(data1, data2) {
  // assign your values
  ...

  // submit your form
  ...
});

最后，您似乎在提交表单之前发出简单的 GET 请求。这些真的有必要吗？我可以想象，如果您提交表单并在处理提交时让服务器获取这些网址，速度会快很多。

那么你需要在 php 中使用 urlencode() 来对你的值进行编码。