Javascript 我的Ajax表单不起作用
我不明白为什么我的ajax表单不能工作，我已经挠头有一段时间了。为了方便起见，我的javascript代码位于忘记密码部分。控制台不输出任何内容，页面也不刷新，所以我不知道出了什么问题？结果应该显示在Javascript 我的Ajax表单不起作用,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,我不明白为什么我的ajax表单不能工作，我已经挠头有一段时间了。为了方便起见，我的javascript代码位于忘记密码部分。控制台不输出任何内容，页面也不刷新，所以我不知道出了什么问题？结果应该显示在中 login2.php代码： <?php $data = array(); if(isset($_POST['email'])){ $data = $_POST['email']; echo json_encode($data); die(); } ?
中
login2.php代码：<?php
$data = array();
if(isset($_POST['email'])){
$data = $_POST['email'];
echo json_encode($data);
die();
}
?>
<!DOCTYPE html>
<html lang="en">
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sign In</title>
<!-- Vendors -->
<!-- Animate CSS -->
<link href="vendors/bower_components/animate.css/animate.min.css" rel="stylesheet">
<!-- Material Design Icons -->
<link href="vendors/bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Site CSS -->
<link href="css/app-1.min.css" rel="stylesheet">
<script src='/google_analytics_auto.js'></script></head>
<body>
<div class="login">
<!-- Login -->
<div class="login__block toggled" id="l-login">
<div class="login__block__header">
<i class="zmdi zmdi-account-circle"></i>
Hi there! Please Sign in
<div class="actions login__block__actions">
<div class="dropdown">
<a href="" data-toggle="dropdown"><i class="zmdi zmdi-more-vert"></i></a>
<ul class="dropdown-menu pull-right">
<li><a data-block="#l-register" href="">Create an account</a></li>
<li><a data-block="#l-forget-password" href="">Forgot password?</a></li>
</ul>
</div>
</div>
</div>
<div class="login__block__body">
<div class="form-group form-group--float form-group--centered form-group--centered">
<input type="text" class="form-control">
<label>Email Address</label>
<i class="form-group__bar"></i>
</div>
<div class="form-group form-group--float form-group--centered form-group--centered">
<input type="password" class="form-control">
<label>Password</label>
<i class="form-group__bar"></i>
</div>
<button class="btn btn--light btn--icon m-t-15"><i class="zmdi zmdi-long-arrow-right"></i></button>
</div>
</div>
<!-- Forgot Password -->
<div class="login__block" id="l-forget-password">
<div class="login__block__header palette-Purple bg">
<i class="zmdi zmdi-account-circle"></i>
Forgot Password?
<div class="actions login__block__actions">
<div class="dropdown">
<a href="" data-toggle="dropdown"><i class="zmdi zmdi-more-vert"></i></a>
<ul class="dropdown-menu pull-right">
<li><a data-block="#l-login" href="">Already have an account?</a></li>
<li><a data-block="#l-register" href="">Create an account</a></li>
</ul>
</div>
</div>
</div>
<div class="login__block__body">
<form>
<p class="m-t-30">Lorem ipsum dolor fringilla enim feugiat commodo sed ac lacus.</p>
<div class="form-group form-group--float form-group--centered">
<input type="text" class="form-control" id="emailfield">
<label>Email Address</label>
<i class="form-group__bar"></i>
</form>
<p id="msg"><p/>
</div>
<button class="btn btn--light btn--icon m-t-15" value="submit" type="submit"><i class="zmdi zmdi-check"></i></button>
</div>
</div>
<script type = "text/javascript">
$("form").on("submit", function(e){
e.preventDefault();
var emailfield = $("#emailfield").val();
var email ='email='+ emailfield;
$.ajax({
url: "login2.php",
method: "POST",
dataType: "json",
data: {email: email},
success: function (result) {
alert("result: " + result);
console.log(result);
$("#msg").html(result);
}
});
});
</script>
</div>
<!-- Older IE Warning -->
<!--[if lt IE 9]>
<div class="ie-warning">
<h1>Warning!!</h1>
<p>You are using an outdated version of Internet Explorer, please upgrade <br/>to any of the following web browsers to access this website.</p>
<div class="ie-warning__container">
<ul class="ie-warning__download">
<li>
<a href="http://www.google.com/chrome/">
<img src="img/browsers/chrome.png" alt="">
<div>Chrome</div>
</a>
</li>
<li>
<a href="https://www.mozilla.org/en-US/firefox/new/">
<img src="img/browsers/firefox.png" alt="">
<div>Firefox</div>
</a>
</li>
<li>
<a href="http://www.opera.com">
<img src="img/browsers/opera.png" alt="">
<div>Opera</div>
</a>
</li>
<li>
<a href="https://www.apple.com/safari/">
<img src="img/browsers/safari.png" alt="">
<div>Safari</div>
</a>
</li>
<li>
<a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">
<img src="img/browsers/ie.png" alt="">
<div>IE (New)</div>
</a>
</li>
</ul>
</div>
<p>Sorry for the inconvenience!</p>
</div>
<![endif]-->
<!-- Javascript Libraries -->
<!-- jQuery -->
<script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Placeholder for IE9 -->
<!--[if IE 9 ]>
<script src="vendors/bower_components/jquery-placeholder/jquery.placeholder.min.js"></script>
<![endif]-->
<!-- Site Functions & Actions -->
<script src="js/app.min.js"></script>
</body>
</html>
使用一个json或normalkey=value 因此，在ajax中进行更改
data: email,
$data["email"] = $_POST['email'];
首先创建一个use JSON.stringifyemailI粘贴的示例代码来缩小这个问题，如果不起作用，请尝试。请共享网络选项卡详细信息，并且没有任何区别。好的，如果您的帖子确实击中了服务器，您能看到网络选项卡吗？另外，请尝试这个JSON.stringifyemailfield。我在回答中错误地将其输入到电子邮件中，也请尝试使用JSON.stringifyemailfield。工作非常完美，我决定将其作为JSON返回！我可以问一下为什么它会以对象的形式返回它吗？因为您之前对ajax说过，返回值将是Json object by dataType:Json，如果您不写这行，默认值是string类型。
$data["email"] = $_POST['email'];