Javascript 如何使用 JS/AJAX/JQUERY 为 POST FORM 添加标题授权？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32901015/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add Header Authorization for POST FORM using JS/AJAX/JQUERY?
提问by Christo Raj
I wanna get inputs using a form on my page and submit those values to a php hosted on another external site. Request maker extension shows the Header Authorization being passed along with other inputs when submitting data on the external site.
我想使用页面上的表单获取输入并将这些值提交到托管在另一个外部站点上的 php。请求生成器扩展显示了在外部站点上提交数据时与其他输入一起传递的标头授权。
The result is probably an xml file (Student Record).Need to pull and show it as result.
结果可能是一个xml文件（Student Record）。需要拉出来作为结果显示。
Tried a lot using $.Ajax and jquery in vain. Please help.
尝试了很多使用 $.Ajax 和 jquery 都是徒劳的。请帮忙。
[1]: http://i.stack.imgur.com/rDO6Z. jpg [2]: http://i.stack.imgur.com/92uTh. jpg
[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>How do I add this header authorization when submitting values from my page to external php? Please Help !
将值从我的页面提交到外部 php 时，如何添加此标头授权？请帮忙 ！
回答by NJInamdar
Its bit late but still posting the answer for future readers who might face the same issue. Please do not provide the form submit url (action) and method type (POST) inside the html code when it is explicitly mentioned inside the ajax request. Notice the corresponding changes added in the code snippets given.
它有点晚了，但仍然为可能面临同样问题的未来读者发布答案。当在 ajax 请求中明确提及时，请不要在 html 代码中提供表单提交 url（操作）和方法类型（POST）。请注意在给定的代码片段中添加的相应更改。
Html form code :
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 code:
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
Update :
更新 ：
PHP service results.php
PHP 服务结果.php
<?php
print_r($_POST["keyName"]);
?>
回答by Himadri Pant
I had a similar issue, needed to add authentication header name and authentication token value in the HTTPPOSTrequest headers. Added this javascript interceptor function in one of the JSPs that forms the HTML panel that's part of every page in the web application.
我有一个类似的问题，需要在HTTPPOST请求标头中添加身份验证标头名称和身份验证令牌值。在构成 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));
};
})();
