Javascript 对同一PHP页面执行AJAX post请求（Jquery表单插件）
我正在使用一个基于AJAX的管理模板编写一个新的web界面。在花了一些时间了解它是如何工作的之后，我创建了一个带有表单的页面，允许您在我的软件中创建一个新项目。基本上使用php，创建一个表单时使用post方法调用同一个页面，然后执行对数据库的查询是非常容易的，但问题是这里的post是使用AJAX提交的，不遵循通常的规则，例如Javascript 对同一PHP页面执行AJAX post请求（Jquery表单插件）,javascript,php,html,ajax,Javascript,Php,Html,Ajax,我正在使用一个基于AJAX的管理模板编写一个新的web界面。在花了一些时间了解它是如何工作的之后，我创建了一个带有表单的页面，允许您在我的软件中创建一个新项目。基本上使用php，创建一个表单时使用post方法调用同一个页面，然后执行对数据库的查询是非常容易的，但问题是这里的post是使用AJAX提交的，不遵循通常的规则，例如 $ajax.post（…） 因此，我将向您解释到目前为止我是如何做到的，并记住我的主要目的是在同一页面上执行查询以显示成功通知 您在下面看到的只是一个名为“addproj
$ajax.post（…）
jQuery（文档）.ready（函数（）{
（函数（$）{
$（'#jquery表单插件测试id'）.ajaxForm({
beforeSubmit:showRequest，//预提交回调
成功：showResponse//post-submit回调
//其他可用选项：
//url:url//重写表单的“操作”属性
//type:type/'get'或'post'，重写窗体的'method'属性
//clearForm:true//成功提交后清除所有表单字段
//resetForm:true//成功提交后重置表单
//$.ajax选项也可以在此处使用，例如：
//超时：3000
});
//预提交回调
函数showRequest（formData、jqForm、选项）{
//formData是一个数组；这里我们使用$.param将其转换为字符串以显示它
//但是表单插件在提交数据时会自动为您执行此操作
var queryString=$.param（formData）；
//jqForm是封装form元素的jQuery对象
//表单的DOM元素执行以下操作：
//var formElement=jqForm[0]；
警报（'即将提交：\n\n'+queryString）；
$（“#结果”）.text（查询字符串）；
返回true；
}
//提交后回拨
函数showResponse（responseText、statusText、xhr$form）{
//对于正常的html响应，成功回调的第一个参数
//是XMLHttpRequest对象的responseText属性
//如果向ajaxForm方法传递了数据类型为的Options对象
//属性设置为“xml”，然后是成功回调的第一个参数
//是XMLHttpRequest对象的responseXML属性
//如果向ajaxForm方法传递了数据类型为的Options对象
//属性设置为“json”，然后是成功回调的第一个参数
//是服务器返回的json数据对象
//$（“#结果”）.text（状态文本）；
警报（“已提交”）；
}
}（jQuery））；
});
名称
描述
创造
如果你能告诉我一些事情，那应该是很棒的家伙！谢谢大家! 我用您的代码在本地构建了一个示例，ajax或完成后的新post请求没有问题。我做的两个改变是： 形式设定动作
<form id="jquery-form-plugin-test-id" class="form" action="test.php" method="post" novalidate="novalidate">
<input class="form-control" id="id_description" maxlength="30"
name="desc" placeholder="Project Description" required="required" title="" type="text" />
<?php
var_dump($_POST);
我不明白您为什么不使用.submit（）并在.then（）中管理响应。如果您喜欢像PHP这样的简单方法，请承诺？你需要一个嵌套的职位在水平，对吗？问题是，在post回调中，我得到了值，但在ajax中，为了执行数据库查询，我需要在文件开头将它们传递给php脚本。例如，我无法使用文件顶部的print\r（$\u POST）检索它们print\r（$\u请求）您将获得值我无法理解您的问题，我尝试在本演示中简单一点：，检查它，如果有任何问题，请说出来，我希望这个演示能解决您的歧义。关键是，当我尝试执行像您的小提琴一样的ajax请求时，它不会被执行，因为出于某些原因，模板会处理所有ajax请求。。。这就是问题所在。你是对的。问题还在于，在同一页上执行请求时，var_dump总是显示为空，但在响应中，数据实际上在那里，因此我可以执行请求并处理数据。谢谢你，尼奥！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
(function ($) {
$('#jquery-form-plugin-test-id').ajaxForm({
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback
// other available options:
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'method' attribute
//clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit
// $.ajax options can be used here too, for example:
//timeout: 3000
});
// pre-submit callback
function showRequest(formData, jqForm, options) {
// formData is an array; here we use $.param to convert it to a string to display it
// but the form plugin does this for you automatically when it submits the data
var queryString = $.param(formData);
// jqForm is a jQuery object encapsulating the form element. To access the
// DOM element for the form do this:
// var formElement = jqForm[0];
alert('About to submit: \n\n' + queryString);
$('#result').text(queryString);
return true;
}
// post-submit callback
function showResponse(responseText, statusText, xhr, $form) {
// for normal html responses, the first argument to the success callback
// is the XMLHttpRequest object's responseText property
// if the ajaxForm method was passed an Options Object with the dataType
// property set to 'xml' then the first argument to the success callback
// is the XMLHttpRequest object's responseXML property
// if the ajaxForm method was passed an Options Object with the dataType
// property set to 'json' then the first argument to the success callback
// is the json data object returned by the server
//$('#result').text(statusText);
alert("Submitted");
$.ajax({
url: 'https://reqres.in/api/users?page=2',
method : 'GET',
success : function (data){
result.html(result.html()+JSON.stringify(data));
}
})
}
}(jQuery));
});
</script>
</head>
<body>
<div id="result"></div>
<form id="jquery-form-plugin-test-id" class="form" action="test.php" method="post" novalidate="novalidate">
<div class="form-group required row">
<label class="col-md-2 col-form-label">Name</label>
<div class="col-md-4">
<input class="form-control" id="id_name" maxlength="30" name="name"
placeholder="Project Name" required="required" title="" type="text" />
</div>
</div>
<div class="form-group required row">
<label class="col-md-2 col-form-label">Description</label>
<div class="col-md-4">
<input class="form-control" id="id_description" maxlength="30" name="desc"
placeholder="Project Description" required="required" title="" type="text" />
</div>
</div>
<div class="form-actions">
<button type="submit" name="submit" class="btn btn-primary" id="register-submit-btn">
<span class="fa fa-plus"></span> Create
</button>
</div>
</form>
</body>
</html>