gpt4 book ai didi

javascript - 使用JQuery发送表单数据并解析返回的JSON数据

转载 作者:行者123 更新时间:2023-11-30 16:41:00 24 4
gpt4 key购买 nike

这可能是一个相对简单的任务,但我不知道为什么过去 3 天我一直在为它而苦苦挣扎。

我必须创建一个登录表单,将电子邮件和密码发送到一个 php 文件。 php 文件验证用户并返回 JSON 数据。登录成功返回的JSON:

enter{"error":0,"message":"User successfully logged in!","api_key":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJzdHJlZXRlYXRfdXNlcmhhbmRsZXIiLCJleHAiOjE0NDA0Mjg5NDEsImlhdCI6MTQzOTUyODk0MX0.OcDRN4tiQrZPJnpA3Iw2tF4kogYxX-DuDhFqd8vqQts"}

如果登录不成功:

enter{"error":1,"message":"User doesn't exist!"}

如果登录成功,表单需要将用户重定向到另一个 html 页面。我已经尝试了几乎所有 jQuery 方法($.post、$.ajax)来发送表单数据和接收 JSON 数据,但到目前为止都没有成功。我试过的代码:

HTML:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="img.js"></script>
</head>

<body>
<div data-role="page">
<div data-role="header" class="ui-content">Login</div>
<div data-role="content" class="ui-content">
<form method="post" action="#" id="loginform">
<div class="ui-field-contain">

<br>
<div>
<label for="email">Email:</label>
<input type="email" name="email" id="email" data-clear-btn="true">
</div>

<div>
<label for="password">Password:</label>
<input type="password" name="password" id="password" data-clear-btn="true">
</div>
<input type="button" value="Login" id="login">
</div>
</form>
</div>

JavaScript 代码:

$(document).ready(function(){
$("#login").click(function(){
var email = $("#email").val();
var password = $("#password").val();
// Checking for blank fields.
if (email =='' || password =='') {
alert("Please fill all fields...!!!!!!");
}
else {
$.post("http://streetdict.esy.es/v1/login",{ email: email, password:password},
function(data) {
var json_response=data;
alert(json_response);
});
}
});
});

这段代码基本上应该只将 JSON 响应显示为警报,对吗?除了它什么也没显示。我需要做的是,如果登录成功,它应该使用 ajax 异步重定向到另一个名为 untitled.html 的页面。有人请帮助我!

最佳答案

使用下面的代码发送post请求然后检查响应

$(document).ready(function(){
$("#login").click(function(){
var email = $("#email").val();
var password = $("#password").val();
// Checking for blank fields.
if( email =='' || password ==''){
alert("Please fill all fields...!!!!!!");
}
else {

$.ajax({
url:'http://streetdict.esy.es/v1/login',
type:'POST',
data:{ email: email, password:password},
success:function(data){
if(data['error'] == '0'){
window.location.href = 'untitled.html';
}
},
error:function(e){
alert("error in request");
},
});

}
});
});

关于javascript - 使用JQuery发送表单数据并解析返回的JSON数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32002770/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com