如何使用JS / AJAX / JQUERY为POST FORM添加头文件授权?

时间:2015-10-02 05:24:24

标签: javascript jquery ajax header authorization

我想在我的页面上使用表单获取输入并将这些值提交给托管在另一个外部站点上的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提交值时添加此标头授权?请帮助!

2 个答案:

答案 0 :(得分:3)

它有点迟了但仍然为可能面临同样问题的未来读者发布答案。 当在ajax请求中明确提到时,请不要在html代码中提供表单提交URL(操作)和方法类型(POST)。 请注意在给出的代码片段中添加的相应更改。

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"]);
?>

答案 1 :(得分:0)

我遇到了类似的问题,需要在HTTP POST请求标头中添加身份验证标头名称和身份验证令牌值。在构成HTML面板的一个JSP中添加了此javascript拦截器功能,该面板是Web应用程序中每个页面的一部分。

// 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));
    };
})();