[英]Send Login form data using jquery + POST + JSON format
I am trying to build a login form. 我正在尝试建立一个登录表单。 The data is transferred using jquery and converted to json format.
数据使用jquery传输并转换为json格式。 But for some reason I keep getting this: error 1) "OPTIONS ' URL ' No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access" 2) XMLHttpRequest cannot load ' URL '.
但由于某些原因,我不断收到此错误:1)。“OPTIONS‘URL’否‘访问控制允许来源’标头出现在所请求的资源产地‘空’,因此是不允许访问” 2)的XMLHttpRequest不能加载“ URL ”。 No 'Access-Control-Allow-Origin' header is present on the requested resource.
所请求的资源上没有“ Access-Control-Allow-Origin”标头。 Origin 'null' is therefore not allowed access.
因此,不允许访问原始“空”。
I tried testing my code by printing it out and the data is formatted correctly but when I try to debug it I don't see any data going to the server after I hit the sumbit button. 我尝试通过打印出代码来测试我的代码,并且数据的格式正确,但是当我尝试对其进行调试时,我在按下sumbit按钮后看不到任何数据进入服务器。 Here is the code:
这是代码:
<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>
My GetPostAjax.js contains this code: 我的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");
}
});
}
When I select dev options in chrome and hit submit after entering a userid and password I see that the Form Data tab is missing. 当我在chrome中选择开发者选项并在输入用户名和密码后点击“提交”时,我看到“表单数据”标签缺失。 I just see 'Request Headers' and 'Response Headers'.
我只看到“请求标头”和“响应标头”。 So I am not sure whether the form data is missing or is it not sending it out?
因此,我不确定表单数据是否丢失还是没有发送出去? I have been at it for over 2 weeks and I'm not sure I understand what is going wrong here.
我已经参加了2个多星期,但不确定我是否理解这里出了什么问题。
This: 这个:
post_data(url, function(data) {
alert("Success");
});
Should be: 应该:
post_data(url,jsonfy,'no');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.