Javascript AJAX表单后处理默认不工作
我有一个简单的HTML文档和一个表单，我想在不离开页面的情况下发布到服务器上。我已经在互联网上搜索了一整天，试图找出如何让它工作，我想出了以下代码：Javascript AJAX表单后处理默认不工作,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,我有一个简单的HTML文档和一个表单，我想在不离开页面的情况下发布到服务器上。我已经在互联网上搜索了一整天，试图找出如何让它工作，我想出了以下代码： <body> <script> $(document).ready(function() { $('#newResource').submit(function (e) { e.preventDefault(); $.ajax({
<body>
<script>
$(document).ready(function() {
$('#newResource').submit(function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'scripts/script.php?new-resource=1',
data: $('#newResource').serialize(),
success: function () {
alert('form was submitted');
}
});
return false;
});
});
</script>
<form id="newResource" class="form-basic" enctype="multipart/form-data" method="post" action="scripts/script.php?new-resource=1">
<label><b>Resource Name:</b></label>
<input class="input-text" type="text" placeholder="Enter the resource name..." name="name" id="name" autocomplete="off" required="">
<br>
<label><b>Resource URL:</b></label>
<input class="input-text" type="text" placeholder="Enter the resource URL..." name="url" id="url" autocomplete="off" required="">
<br>
<label><b>Resource Department:</b></label>
<p>Select the department this resource should belong to.</p>
<select class="input-select" name="department" id="department">
<option value="5">Human Resources</option>
<option value="1">Information Technology</option>
<option value="3">Marketing</option>
<option value="0">No Department</option>
<option value="6">Purchasing</option>
<option value="4">Sales</option>
</select>
<br>
<label><b>Resource Icon:</b></label>
<p>Select the icon image to be displayed with this resource.</p>
<select class="input-select" name="icon" id="icon">
<option value="bell.png">Alarm Bell</option>
<option value="chat-bubbles.png">Chat Bubbles</option>
<option value="chronometer.png">Chronometer</option>
<option value="database.png">Database Icon</option>
<option value="envelope.png">Envelope</option>
<option value="folder.png">File Folder</option>
<option value="analytics.png">Monitor with Line Graph</option>
<option value="pie-chart.png">Monitor with Pie Chart</option>
<option value="networking.png">Networking Heirarchy</option>
<option value="orientation.png">Orientation Arrow</option>
<option value="server.png">Server Rack</option>
<option value="settings.png">Settings Gears</option>
<option value="speedometer.png">Speedomoeter</option>
<option value="worldwide.png">World Wide Web Globe</option>
</select>
<br>
<div style="float: right;">
<button type="button" onclick="loadPrefs('resources');" class="form-button cancel">Cancel</button>
<button class="form-button submit" type="submit">Submit</button>
</div>
</form>
</body>
我似乎不明白为什么这不起作用。非常感谢您的任何想法和反馈。您的事件处理程序将绑定到表单的提交事件。当表单提交时，停止默认的同步HTML表单提交已经太晚了 将处理程序绑定到提交按钮上的to click事件，使用
event.preventDefault（）$(document).ready(function() {
$('.submit').click(function (e) {
e.preventDefault();
var form = $('#newResource');
var action = form.attr('action');
var data = form.serialize();
$.ajax({
type: 'POST',
url: action,
data: data,
success: function () {
alert('form was submitted');
}
});
});
});
var form = $('#newResource');
现在，您可以将该代码包装到一个名为“bindForms（）”的函数或其他任何函数中，并且您有一个处理所有表单的通用方法，前提是HTML结构始终相同（或者至少在某种程度上，submit按钮始终具有submit类，并且始终包装在作为表单子级的父容器中。您的事件处理程序已绑定到表单的submit事件。在提交表单时，停止默认的同步HTML表单提交为时已晚 将处理程序绑定到提交按钮上的to click事件，使用
event.preventDefault（）$(document).ready(function() {
$('.submit').click(function (e) {
e.preventDefault();
var form = $('#newResource');
var action = form.attr('action');
var data = form.serialize();
$.ajax({
type: 'POST',
url: action,
data: data,
success: function () {
alert('form was submitted');
}
});
});
});
var form = $('#newResource');
现在，您可以将该代码包装到一个名为“bindForms（）”的函数或其他任何函数中，并且您有一个处理所有表单的通用方法，前提是HTML结构始终相同（或者至少在某种程度上，submit按钮总是有一个submit类，并且总是包装在作为表单子级的父容器中。好的，我已经设法使以下代码正常工作：
<script type="text/javascript">
$(document).on('click', '.submit', function(e) {
debugger;
e.preventDefault();
var form = $(this).parent().closest('form');
var action = form.attr('action');
var data = form.serialize();
$.ajax({
type: 'POST',
url: action,
data: data,
success: function () {
loadPrefs('resources');
}
});
});
</script>
$（文档）。在（'click'，'.submit'，函数（e）{
调试器；
e、 预防默认值（）；
var form=$（this.parent（）.closest（'form'）；
var action=form.attr（“action”）；
var data=form.serialize（）；
$.ajax({
键入：“POST”，
url:action，
数据：数据，
成功：函数（）{
loadPrefs（“资源”）；
}
});
});
HTML表单元素是通过AJAX添加的，但脚本元素也是如此。我将脚本元素移动到页面顶部，使其成为静态的，不再与表单一起加载。好的，我已成功地使以下代码正常工作：
<script type="text/javascript">
$(document).on('click', '.submit', function(e) {
debugger;
e.preventDefault();
var form = $(this).parent().closest('form');
var action = form.attr('action');
var data = form.serialize();
$.ajax({
type: 'POST',
url: action,
data: data,
success: function () {
loadPrefs('resources');
}
});
});
</script>
$（文档）。在（'click'，'.submit'，函数（e）{
调试器；
e、 预防默认值（）；
var form=$（this.parent（）.closest（'form'）；
var action=form.attr（“action”）；
var data=form.serialize（）；
$.ajax({
键入：“POST”，
url:action，
数据：数据，
成功：函数（）{
loadPrefs（“资源”）；
}
});
});
HTML表单元素是通过AJAX添加的，但脚本元素也是如此。我将脚本元素移动到页面顶部，使其成为静态的，不再与表单一起加载。您案例中的重要信息是“HTML表单元素是通过AJAX添加的”。At
$（document）.ready（）#newResource$（文档）。在（'click'，'.submit'，function（e）{…}$（document）.ready（）#newResource$（document）。on（'click'，'.submit'，函数（e）{…}