Jquery (ajax) load function 不起作用
Jquery (ajax) load function not working?
我对JQuery和Ajax函数相当陌生,我不知道为什么我的脚本总是崩溃。我基本上有一个表单,用户可以在其中输入他们的姓名和位置。当用户提交表单时,脚本使用 JQuery 的 $.post() 函数将用户值发送到 "locationHandler.php",后者获取用户信息(名称和位置)并将其存储在 mysql 数据库中。$.post 请求成功后,我想使用 JQuery 的 .load() 函数来更新任意div 标签内的 html。每次提交表单时,脚本都会将数据存储到 mysql 数据库中,因为它打算这样做,但是脚本无法 .load() 我的 php 文件。
这是我的索引.php页面的代码:
<?php ?>
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#locationForm").submit(function() {
var unameVal = $("#locationForm input[name='uname']").val();
var locationVal = $("#locationForm select[name='location']").val();
$.post("locationHandler.php", {uname: unameVal, location: locationVal}, function() {
$("#display").load("defaultPhp.php");
});
});
});
</script>
</head>
<body>
<form id="locationForm" method="post">
<label>Name:</label>
<input type="text" name="uname" />
<label>Location:</label>
<select name="location">
<option value="uncc">UNC Charlotte</option>
<option value="ncsu">NC State</option>
</select>
<input type="submit" value="Submit" />
</form>
<div id="display"></div>
</body>
</html>
这是我的默认 Php.php 页面的代码,它与我的 index.php 页面位于同一目录中:
<?php
echo "<p>This is some arbitrary text</p>";
?>
我尝试删除$(document).ready(function(e) { ... });
并将脚本标签直接放在结束</form>
标签下方,但随后脚本停止将数据存储到 mysql 数据库中。
所以首先,为什么如果我从上面的脚本中删除$(document).ready(function(){...});
,它会停止将值存储到 mysql 数据库中吗?
其次,为什么脚本不会将我的 defaultPhp.php 页面的内容加载到div 标签中?
请在提交功能结束前使用返回 false。
所以首先,为什么如果我从上面的脚本中删除$(document).ready(function(){...};,它会停止将值存储到mysql数据库中吗?
因为javascript不知道你的表单,直到文档准备好
Ajax 通过$.post
请求不会阻止本机浏览器将页面发送到服务器的行为。您必须使用事件preventDefault
函数来取消它:
$(document).ready(function() {
$("#locationForm").submit(function(e) {
e.preventDefault();//stop form submiting
var unameVal = $("#locationForm input[name='uname']").val();
var locationVal = $("#locationForm select[name='location']").val();
$.post("locationHandler.php", {uname: unameVal, location: locationVal}, function() {
$("#display").load("defaultPhp.php");
});
});
});
有关preventDefault
的更多信息,请点击此处。
首先..yoyu 不需要删除 $(document).ready(function(){...});从您的脚本...也不要删除脚本标签,否则您的脚本将停止工作...在负载的情况下...请检查您给出的路径是否正确...
例如 $( "#display" ).load( "ajax/test.php");
- Javascript Duplicates Function 不起作用
- function(){如果淡出,则追加}不起作用
- 如果我使用 JQuery $(window).click(function() 关闭菜单,菜单的墨水不起作用
- JQuery .on(“click”, function() ) 不起作用
- JQuery .click(function() 在 IE 中不起作用
- $(document).ready(function () 在弹出窗口打开后不起作用
- $(.class).click(function(){}) 不起作用
- JQuery ajax post function不起作用
- Jquery (ajax) load function 不起作用
- $('body').on('click', '.anything', function(){}) 在 iOS 上不起作用
- window.addEventListener(“加载”,function(){});不起作用
- 为什么function(){}不起作用,而(function()})起作用?(Chrome DevTools/Node)
- onchange to create autosave function(javascript)did'不起作用
- Var foo = (function(){..})();.. Foo()不起作用
- 未捕获的引用错误:$ is not defined(匿名函数)$(function()不起作用
- 对象.assign似乎对Function.prototype不起作用
- firefox中的href=javascript:function()不起作用
- 使用Object.create()和function.apply'似乎不起作用
- function(){}(args) 在 FF 中不起作用
- $(window).scroll(function)不起作用