javascript Jquery Ajax 请求不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29933261/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Ajax Request Not Working
提问by Dilan Leelarathna
I tried to send form data via a jquery ajax requestto the server and display response of the php file that located on the server, in the <div id=”response-box”></div>. But when I submit the form nothing happened. What is my mistake? I tried three days to solve this. Help me. Thank You!
我尝试通过 a 将表单数据发送jquery ajax request到服务器并显示位于服务器上的 php 文件的响应，在<div id=”response-box”></div>. 但是当我提交表单时什么也没发生。我的错误是什么？我尝试了三天来解决这个问题。帮我。谢谢！
I tested this on localhost (wamp server)
我在本地主机（wamp 服务器）上测试了这个
This is my html code on index.html
这是我在 index.html 上的 html 代码
<form id="myform">
<input type="text" id="fname">
<input type="text" id="lname">
<input type="submit" id="data-send-button" value="Send Data">
</form>
<div id="responce-box"> </div>
This is Jquery Ajax Request on app.js
这是 app.js 上的 Jquery Ajax 请求
$(document).ready(function(){
$('form#myform').on('submit' , function(){
$.ajax({
url:"submit.php" ,
type: "POST" ,
data: {fname: $('#fname').val(), lname: $('#lname').val()} ,
success: function(data){
$('#responce-box').html(data);}
});
});
});
This is my php code on submit.php (localhost/wamp server)
这是我在 submit.php 上的 php 代码（本地主机/wamp 服务器）
<?php
$fname = $_POST['fname'];
$lname = $_POST['lname'];
echo $name $lname;
// Code for Data Sending to the MySql Data Base
采纳答案by Norlihazmey Ghazali
No when I click submit button, Text Values in the text boxes are Disappeared
否，当我单击提交按钮时，文本框中的文本值消失了
Looking at your code, you are using $.ajax request when clicking submit button. Means that, the form reacted as normal form that refresh the page. If you want to request an ajax, then you should disable default behavior of the form by using preventDefault()code. And i did't see any error in your js code.
查看您的代码，单击提交按钮时您正在使用 $.ajax 请求。这意味着，表单作为刷新页面的正常表单做出反应。如果要请求 ajax，则应使用preventDefault()代码禁用表单的默认行为。我在你的 js 代码中没有看到任何错误。
Change js code into this :
将js代码改成这样：
$(document).ready(function(){
$('form#myform').on('submit' , function(e){
e.preventDefault();//<--add here ---^
$.ajax({
url:"submit.php" ,
type: "POST" ,
data: {fname: $('#fname').val(), lname: $('#lname').val()} ,
success: function(data){
$('#responce-box').html(data);}
});
});
});
Some error in your php code. Try following code :
您的 php 代码中存在一些错误。尝试以下代码：
$fname = $_POST['fname'];
$lname = $_POST['lname'];
echo $fname.$lname;
回答by Dilan Leelarathna
Problem Solved. Credit goes to the people who comment/answer under this post.Thank You!
问题解决了。归功于在此帖子下发表评论/回答的人。谢谢！
Error was on the app.jsfile. Added event.preventDefault();and added dataType :"html",to the ajax request.
app.js文件出错。添加event.preventDefault();并添加dataType :"html",到ajax请求中。
$(document).ready(function(event){
event.preventDefault(); //Added
$('form#myform').on('submit' , function(){
$.ajax({
url:"submit.php" ,
type: "POST" ,
dataType :"html", //Added
data: {fname: $('#fname').val(), lname: $('#lname').val()} ,
success: function(data){
$('#responce-box').html(data);}
});
});
});回答by RisingSun
The variable names dont look correct $namevs $fname.
变量名称$name与$fname.
Also, try specifying dataType html. $.ajaxis a little tricky to get it working properly sometimes.
另外，尝试指定dataType html. $.ajax有时让它正常工作有点棘手。
