web-dev-qa-db-ja.com

JS / AJAX / JQUERYを使用してPOST FORMのヘッダー認証を追加するにはどうすればよいですか？

ページのフォームを使用して入力を取得し、それらの値を別の外部サイトでホストされているphpに送信したいと思います。リクエストメーカー拡張機能は、外部サイトでデータを送信するときに、他の入力とともに渡されるヘッダー承認を示します。

結果はおそらくxmlファイル（学生レコード）です。結果としてプルして表示する必要があります。

$ .Ajaxとjqueryを無駄に使ってたくさん試しました。助けてください。

[1]： http://i.stack.imgur.com/rDO6Z 。 jpg [2]： http://i.stack.imgur.com/92uTh 。 jpg

function myFunction() {
var name = document.getElementById("name").value;

// AJAX code to submit form.
$.ajax({
type: "POST",
url: "http://externalsite.cpm/results.php.php",
data: dataString,
  beforeSend: function(xhr) {
        
    xhr.setRequestHeader('Authorization', "Basic XXXXXXXXXXXXXXXXXXXXXXXXX" );   or xhr.setRequestHeader('Authorization', "Basic " +btoa(ser_user + ':' + ser_pass));
                                                },
cache: false,
success: ???


xmlhttp.open("POST","your_url.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=" + name + "&email=" + email);
<body>

<form action="http://externalsite.cpm/results.php" method="post" >
        Enter Your Name<br>
        <input type="text" name="name" >
        <br>
        <input type="submit" onclick="myFunction()" value="Submit">
        
</body>

ページから外部PHPに値を送信するときに、このヘッダー認証を追加するにはどうすればよいですか？助けてください ！

javascriptjqueryajaxheaderauthorization
4
Christo Raj

少し遅れていますが、同じ問題に直面する可能性のある将来の読者のために回答を投稿しています。 ajaxリクエスト内で明示的に言及されている場合は、フォーム送信URL（アクション）とメソッドタイプ（POST）をhtmlコード内に指定しないでください。与えられたコードスニペットに追加された対応する変更に注意してください。

Htmlフォームコード：

            <form><!---Removed form submit url-->
            <input type="text" id="keyName" value="testValue">
            <!---Id attribute added to input field to be submitted--->
            <input type="button" onclick="myFunction()" value="Submit">
            <!---Input type is button NOT submit--->
            </form>

Javascriptコード：

function myFunction(){
var dataValue = $("#keyName").val();
$.ajax({
            type : 'POST',
            //remove the .php from results.php.php
            url : "http://externalsite.cpm/results.php",
            //Add the request header
            headers : {
                Authorization : 'Bearer ' + 'XXXXXXXXXXXXXXXXXXXXXXXXX'
            },
            contentType : 'application/x-www-form-urlencoded',
            //Add form data
            data : {keyName : dataValue},
            success : function(response) {
                console.log(response);
            },
            error : function(xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                console.log(err);                   
            }
        }); //End of Ajax
}   // End of myFucntion

更新：

PHPサービスresults.php

<?php 
     print_r($_POST["keyName"]);
?>
4
NJInamdar

同様の問題があり、HTTPPOSTリクエストヘッダーに認証ヘッダー名と認証トークン値を追加する必要がありました。このjavascriptインターセプター関数を、Webアプリケーションのすべてのページの一部であるHTMLパネルを形成するJSPの1つに追加しました。

// this will add employee authentication headers to every ajax call
(function() {
    var site = window.XMLHttpRequest.prototype.send;
    window.XMLHttpRequest.prototype.send = function() {
        this.setRequestHeader("${employee.role.header}", "${employee.auth.secret}")
        return site.apply(this, [].slice.call(arguments));
    };
})();
0
Himadri Pant