0
我正在嘗試構建登錄表單。數據使用jquery傳輸並轉換爲json格式。但由於某些原因,我不斷收到這樣的: 錯誤 1)「OPTIONS‘URL’否‘訪問控制允許來源’標頭出現在所請求的資源產地‘空’,因此不允許訪問「 2)XMLHttpRequest無法加載'URL'。請求的資源上沒有「Access-Control-Allow-Origin」標題。因此不允許原產地'null'訪問。使用jQuery + POST + JSON格式發送登錄表單數據
我試着打印出來測試我的代碼,數據格式正確,但是當我嘗試調試它時,我沒有看到任何數據在我點擊sumbit按鈕後進入服務器。下面是代碼:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery.json-2.2.js"></script>
<script src="GetPostAjax.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#submit").click(function(e){
e.preventDefault();
var username,password;
username=$("#username").val();
password=$("#username").val();
if(username.length>0 && password.length>0)
{
// var request = new Object();
// var userDetails = new Object();
var user = new Object();
user.userid=username;
user.password=password;
// userDetails.user = user;
// request.userDetails = userDetails;
var jsonfy = $.toJSON(user);
$("#json1").html(jsonfy);
//Ajax Call
var url='***URL***';
post_data(url, function(data) {
alert("Success");
});
$(".part1").val('');
$("#username").focus();
}
});
});
</script>
<style>
body{font-family:arial;font-size:12px;}
.right{text-align:right}
input[type='text'], select
{
border:solid 1px #333;
padding:4px;
width:180px;
}
select{width:190px}
div{padding:20px;word-wrap: break-word;width:600px}
</style>
</head>
<body>
<table width='100%'>
<tr><td>
</td>
<td width='730px'>
</td>
</tr>
</table>
<table width='100%'>
<tr>
<td valign='top'>
<table width='100%'>
<tr>
<td>
<form method="post" action="***URL***" >
<table width='100%'>
<tr>
<td class='right'>Name</td>
<td><input type='text' name='username' id='username' class='part1'/></td>
</tr>
<tr>
<td class='right'>Password</td>
<td><input type='text' name='password' id='password' class='part1'//></td>
</tr>
<tr>
<td class='right'></td>
<td><input type='submit' id='submit'/></td>
</tr>
</table>
</form>
</td>
<td width='50%' valign='top'>
<h2>JSON Output</h2>
<div id='json1'>
</div>
</td>
</tr>
</table>
</td>
</tr>
</body>
</html>
我GetPostAjax.js包含此代碼:
function get_data(url,encodedata, success){
$.ajax({
type:"GET",
url:url,
data :encodedata,
dataType:"json",
restful:true,
contentType: 'application/json',
cache:false,
timeout:20000,
async:true,
beforeSend :function(data) { },
success:function(data){
success.call(this, data);
},
error:function(data){
alert("Error In Connecting");
}
});
}
function post_data(url,encodedata, success){
$.ajax({
type:"POST",
url:'***URL***',
data :encodedata,
dataType:"json",
restful:true,
contentType: 'application/json',
cache:false,
timeout:20000,
async:true,
beforeSend :function(data) { },
success:function(data){
success.call(this, data);
},
error:function(data){
alert("Error In Connecting");
}
});
}
當我選擇在Chrome瀏覽器開發選項和命中輸入用戶名和密碼,我看到的是,將數據標籤後提交不見了。我只看到'Request Headers'和'Response Headers'。所以我不確定表單數據是否丟失或者沒有發送出去? 我已經在這裏呆了2個星期了,我不確定我明白這裏發生了什麼問題。
謝謝您的幫助。這絕對有道理!但錯誤仍然存在,我沒有看到任何表單數據被髮送。這兩個錯誤: 1)「OPTIONS'URL'No'Access-Control-Allow-Origin'標題出現在請求的資源上,因此不允許Origin'null'訪問」2)XMLHttpRequest無法加載'URL'。請求的資源上沒有「Access-Control-Allow-Origin」標題。因此不允許原產地'null'訪問。 – neesop
您正嘗試從不同的域中獲取網址,這就是爲什麼您要獲取該標頭。 – Hackerman
謝謝你的回覆羅伯特。我把文件放在服務器本身上,但錯誤仍然存在。 – neesop