2014-03-31 114 views
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

此:

post_data(url, function(data) { 
      alert("Success"); 
     }); 

應該是:

post_data(url,jsonfy,'no'); 
+0

謝謝您的幫助。這絕對有道理!但錯誤仍然存​​在,我沒有看到任何表單數據被髮送。這兩個錯誤: 1)「OPTIONS'URL'No'Access-Control-Allow-Origin'標題出現在請求的資源上,因此不允許Origin'null'訪問」2)XMLHttpRequest無法加載'URL'。請求的資源上沒有「Access-Control-Allow-Origin」標題。因此不允許原產地'null'訪問。 – neesop

+0

您正嘗試從不同的域中獲取網址,這就是爲什麼您要獲取該標頭。 – Hackerman

+0

謝謝你的回覆羅伯特。我把文件放在服務器本身上,但錯誤仍然存​​在。 – neesop