如何發送跨域並獲得響應

Question

我想設置一個表單，在其中我可以將一些信息發送到另一個跨域域並獲得響應。

假設我有以下數據庫表info

我想設置一個表單，在其中我可以將一些信息發送到另一個跨域域並獲得響應。

我在教程中進行了很多搜索，但是都沒有完整的示例可供學習，因此該示例對我有很大幫助。

假設我有以下數據庫表信息

---------------------
| ID |  Name  | Age |
---------------------
| 12 |  Dave  | 18  |
---------------------
| 34 |  Eva   | 17  |
---------------------
| 31 | Carry  | 19  |
---------------------

現在， www.site_1.com上的HTML頁面index.html ，此表單會將跨域的name和age發送到http://www.site_2.com/data.php

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<form id="form" name="form" method="post">
<fieldset>
<label for="name">Name:</label>
<input class="text" id="name" name="name" size="20" type="text" />

<label for="name">Age:</label>
<input class="text" id="age" name="age" size="20" type="text" />

<input type="submit" value="submit" id="submit" name="submit"/>
</fieldset>
</form>

<script>
$( document ).ready(function() {

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

        var name = $(this).find("#name").val();
        var age = $(this).find("#age").val();

        $.ajax({
            type: 'POST',
            crossdomain: true,
            //data: 'name=' + name + '&age=' + age,
            data: {name : name, age : age},
            url: 'http://www.site_2.com/data.php',
            success: function(data){
                if(data == 1){
                    alert("YES!");
                }else{
                    alert("NO");
                }
            },
            error: function(){
                alert('Error');
            }
        });
        return false;
    });
});
</script>

現在在www.site_2.com是data.php的代碼

<?PHP
// Suppose it already connected to DB

// for cross-domain
switch ($_SERVER['HTTP_ORIGIN']) {
    case 'http://localhost': case 'https://localhost':
    header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']);
    header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
    header('Access-Control-Max-Age: 1000');
    header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');
    break;
}

// getting sent informations
$name = $_POST['name'];
$age = $_POST['age'];

// do some query
$a1 = "select id from info where name = '$name'";
$query = mysql_query($a1) or die(mysql_error());
$get = mysql_fetch_array($query);

// get the id
$id = $get['id'];

// i want it to send it back
echo $id;
?>

Answer 1

如果您的www.site_1.com是localhost則您的代碼有效。 您將獲得純文本響應1 （如果id為1）。 如果要返回的數據很多，則可以在服務器中使用json_encode將其編碼為json，並在客戶端中使用JSON.parse對其進行解碼。 使用echo將數據發送回去就可以了。 您echo所有內容都將在響應正文中

如果它在您的機器上不起作用，則有一些我可以考慮的原因

1. $.ajax部分有一些麻煩。 我只使用不同的客戶端代碼測試了服務器部分。
2. 您的服務器在數據庫操作中遇到了麻煩。
3. 您的客戶端代碼不在localhost域中，因此永遠不會執行用於設置標頭以允許CORS的部分，並且您會在控制台中看到類似XMLHttpRequest cannot load http://www.site_2.com/info.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.site_1.com' is therefore not allowed access.錯誤， XMLHttpRequest cannot load http://www.site_2.com/info.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.site_1.com' is therefore not allowed access. XMLHttpRequest cannot load http://www.site_2.com/info.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.site_1.com' is therefore not allowed access.