javascript - 相対パス - jquery ajax 一部 更新




ajaxの承認とコアに対する2番目の応答でコンテンツを表示する方法 (2)

まず最初に、あなたのサーバーは正しく設定されていないようです。あなたのPHPスクリプトは実行されず、responseは単にスクリプトの内容を返すだけです( mod_phpそれを整理したのです)。

次に、 {"name", "myname"}は有効なJSONはありません。 あなたの応答は{"name": "myname"}べきです、あるいは便宜上あなたは常にjson_encode PHP配列を以下のようにするべきです:

<?php
// Set the correct Content-Type
// this helps when viewing in browser console, and is generally needed
header('Content-Type: application/json');

// Create an array with needed response data
$result = [
    'name' => 'myname'
];

// Convert PHP array to a correct JSON string and echo it
echo json_encode($result);

そうすればあなたのJSONは常に有効になるでしょうし、少なくともデバッグに役立つエラーを見ることになるでしょう。

応答を修正した後は、次のようにできます。

success: function(response, textStatus, jqXHR) {
    // var stringData = JSON.stringify(response); you don't need this
    // since jqXHR object already contains the raw response text

    // It's recommended to prefix variable name with $
    // that way you will always know that it is a JQuery object
    var $mytext = $("#remote");
    $mytext.text(jqXHR.responseText);

    // console.log(response); is better than alert 
    // unless you really need to pause the script
    alert(response.name);
}

JQueryはリクエストがpre-flightリクエストであるかどうかを確認するのに十分スマートなので、2番目のリクエストがコンテンツを配信したときにのみコールバックがトリガーされるようにしてください。

基本的な認証とコアをvpsで作成しました。

curl -Xオプション-i http://111.111.111.111

HTTP/1.1 200 OK
Date: Sat, 15 Sep 2018 08:07:37 GMT
Server: Apache/2.4.6 (CentOS)
Access-Control-Allow-Origin: http://127.0.0.1
Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Authorization,DNT,User-Agent,Keep-Alive,Content-Type,accept,origin,X-Requested-With
Allow: OPTIONS,GET,HEAD,POST,TRACE
Content-Length: 0
Content-Type: httpd/unix-directory

curl -u xxxx:xxxx -i http://111.111.111.111/remote.php

HTTP/1.1 200 OK
Date: Sat, 15 Sep 2018 08:08:07 GMT
Server: Apache/2.4.6 (CentOS)
Access-Control-Allow-Origin: http://127.0.0.1
Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Authorization,DNT,User-Agent,Keep-Alive,Content-Type,accept,origin,X-Requested-With
Last-Modified: Sat, 15 Sep 2018 07:54:13 GMT
ETag: "24-575e43f02c324"
Accept-Ranges: bytes
Content-Length: 36


<?php
echo  '{"name","myname"}';
?>

あなたは、承認とCORが良好な状態にあることがわかります。

私のローカルディレクトリ/var/www/html test-ajax-cors.html。

<script src="http://127.0.0.1/jquery-3.3.1.js"></script>
<script>
function Ajax( ) {
    var url = 'http://111.111.111.111/remote.php';
    $.ajax(url, {
        type:"post",   
        crossDomain: "true",
        dataType:"json",
        beforeSend:function(xhr) {
            xhr.setRequestHeader('Authorization',"Basic " + btoa("xxxx:xxxx"))},
        success:function(response){
        data = JSON.stringify(response);
            alert(data);
            mytext = $("#remote");
            mytext.append(data);
        },
        error: function (e) {
            alert("error");
        } 
    });
};
</script>

<input type="button" value="show content" onclick="Ajax();">
<p id="remote">the content on remote webpage</p>

http://111.111.111.111のremote.php。

cat /var/www/html/remote.php

<?php
echo  '{"name","myname"}';
?>

127.0.0.1/test-ajax-cors.htmlと入力し、[ show content ]をクリックします。
1.iはアラート情報を得ました:エラー
2.remote.phpが127.0.0.1/test-ajax-cors.htmlによって2回呼び出されました( 127.0.0.1/test-ajax-cors.html [ show content表示]ボタンが1回だけクリックされました)。

初めてremote.phpを呼び出すとき、remote.phpの応答には内容がありません。
最初のリクエストはCORSプリフライトリクエストかもしれません、ブラウザはAuthorizationヘッダなしでOPTIONSリクエストを送ります、そして私の場合、サーバはブラウザに200ステータスコードを送ります、それはすべてが良好なステータスにあることを意味します。

2回目にremote.phpを呼び出すときのremote.phpの応答の内容。
127.0.0.1/test-ajax-cors.htmlで2番目の応答に表示するコンテンツを作成する方法。
Sally CJの通知をありがとう。

yum install mod_php
systemctl restart httpd

127.0.0.1/test-ajax-cors.htmlと入力し、[ show content ]をクリックします。
1.alertエラー情報

2. remote.phpが2回呼び出されました、 remote.phpに対するすべての応答は同じです。

{"name","myname"}

内容は私が期待しているものです、なぜウェブページ127.0.0.1\test-ajax-cors.htmlにそれを表示することができないのですか?


最初の問題( エラーセクションからの警告 )については@it_is_a_literature、あなたはあなたのphpファイルのヘッダ(header( 'Content-Type:application / json'); )を設定し、 json_encodeとechoを使用ます。 また、2回の関数呼び出しの場合は、関数ajax()の最後にfalse返す必要があります。

Test.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function Ajax( ) {
    var url = 'http://localhost:855/remote.php';
    $.ajax(url, {
        type:"post",   
        crossDomain: "true",
        dataType:"json",
        beforeSend:function(xhr) {
            xhr.setRequestHeader('Authorization',"Basic " + btoa("xxxx:xxxx"))},
        success:function(response){
        data = JSON.stringify(response);
            alert(data);
            mytext = $("#remote");
            mytext.append(data);
        },
        error: function (e) {
            alert("error");
        }
    });
    return false;
};
</script>

<input type="button" value="show content" onclick="Ajax();">
<p id="remote">the content on remote webpage</p>

Response.php

<?php
header('Content-Type: application/json');
echo  json_encode(array("name","myname"));
?>

応答:





cors