javascript - 发布到 Capsule CRM 和 "AJAX Proxy"

Question

我正在尝试使用 http://support.capsulecrm.com/customer/portal/articles/1639817-website-contact-form-integration 发布一个 Capsule CRM 页面我可以很容易地开始工作。但是，我想使用 AJAX 发布此内容，但一直遇到 CORS 错误。 Capsule CRM 人员已将其关闭，因此您无法在不遇到此错误的情况下使用 AJAX 提交。

联系他们后，我得到了这样的回复:

To do your requests using AJAX your website will need an additional page that will process your webform POST on your site instead of sending it directly to Capsule. This is sometimes called an AJAX Proxy. This page just forwards the post onto the Capsule webform url for processing, if you don't specify a "COMPLETE_URL" on your post the form will return an HTTP 200 response instead of a redirect to make it a bit easier for you to handle.

我花了大部分时间在 Internet 上寻找“AJAX 代理”，但我似乎无法找到示例并开始努力让它工作。希望一些代码可以帮助解决我的问题。

表单.html

<form id="contact-form" class="form">
  <label>Name: </label>
  <input type="text" name="PERSON_NAME" placeholder="Name" value="" required/>
  <label>Email: </label>
  <input type="email" name="EMAIL" placeholder="Email" value="" required  /><br>
  <label>Telephone: </label>
  <input type="text" name="PHONE" placeholder="Telephone number" value="" required /><br>
  <input type="submit" name="submit" value="Submit" />
</form>
<div class="result">
</div>

表单.js

$(文档).ready(函数() {

$('.form').submit(function(event){

    event.preventDefault();
    var messages = $('#result');
    var formData = $('.form').serialize();

    $.ajax({
        type        : "POST",
        url         : capsule.php,
        data        : formData
    })  
    .done(function(response) {
            console.log("Success: " + response);
        }
    })
    .error(function(response)   {
            console.log("Error: " + response);
        }
    });
});

胶囊.php

<?php
<form action="https://service.capsulecrm.com/service/newlead" method="post">
    <input type="hidden" name="FORM_ID" value="XXXXXXXXXXXXXXXXXXXXXXXX">
    <input type="text" name="FIRST_NAME" value="$_POST['PERSON_NAME']">
    <input type="text" name="LAST_NAME" value="$_POST['PERSON_NAME']">
    <input type="text" name="EMAIL" value="$_POST['PERSON_NAME']">
</form>
?>

我几乎需要做一个双重帖子。我需要将数据发布到 Capsule.php，然后我需要发布数据。如果该响应成功，则将其全部反转并更新 form.html 而不刷新。或者有人知道我应该如何形成“AJAX 代理”吗？

这是我第一次单独研究 AJAX，所以请保持温和 :)。

编辑

在尝试了下面的答案并进行了调试后，我在开发人员工具的控制台中找到了它。很难调试，因为我无法访问 Capsules CRM 服务器，所以我目前也在通过电子邮件向他们发送有关我遇到的问题的信息:

(
    [url] => https://service.capsulecrm.com/service/newlead
    [content_type] => 
    [http_code] => 404
    [header_size] => 315
    [request_size] => 206
    [filetime] => -1
    [ssl_verify_result] => 0
    [redirect_count] => 0
    [total_time] => 0.397695
    [namelookup_time] => 0.045858
    [connect_time] => 0.109964
    [pretransfer_time] => 0.268374
    [size_upload] => 705
    [size_download] => 0
    [speed_download] => 0
    [speed_upload] => 1772
    [download_content_length] => 0
    [upload_content_length] => 705
    [starttransfer_time] => 0.333441
    [redirect_time] => 0
)

感谢大家的耐心等待!

Answer 1

您误解了 AJAX 代理的概念。

capsule.php 脚本不应包含 HTML 表单，它应该从 form.html 接收 AJAX 请求数据并通过 POST 请求将其发送/传递到 Capsule CRM 页面.这可以通过多种方式完成:CURL、file_get_contents() 等。

下面是 CURL 的实现:

$ch = curl_init();
curl_setopt_array($ch, array(
    CURLOPT_URL => 'https://service.capsulecrm.com/service/newlead',
    CURLOPT_NOBODY => false,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_POST => true,
    CURLOPT_POSTFIELDS => $_POST,
    CURLOPT_SSL_VERIFYPEER => false,
));
$response = curl_exec($ch);
if ($response && curl_getinfo($ch, CURLINFO_HTTP_CODE) == 200)
    return $response;
header($_SERVER['SERVER_PROTOCOL'].' 404 Not Found');