javascript - Perform AJAX post request to the same PHP page (Jquery Form Plugin)
问题描述
I'm writing a new web interface using JavaTMP that is an AJAX based admin template. After spending some time on understanding how it works i created a page with a form that will allow you to create a new project in my software. Basically using php it will be pretty easy to create a form with a post method calling the same page and then performing a query to the database but the problem is here the post is submitted using AJAX and doesn't follow the usual rules such as
$ajax.post(...)
So I'm going to explain you how i did so far and remember that my main purpose is to perform a query on the same page to show a success notify.
All you see below is a partial page called "addproject ". I left the original template comments if you need them:
<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");
}
}(jQuery));
});
</script>
<div id="result"></div>
<form id="jquery-form-plugin-test-id" class="form" action="" 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="name"
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>
So as you see it performs the ajax request in this way, i tried to take a look to the library but it's a mess and on their website with their documentation they don't tell you how to accomplish this task.
I tried to perform another post request inside the post callback but it just freezes the page.
I tried a lot and on the code up there I made just setting a div text with the post parameters but i need to pass them to the php code...
If you can tell me something It should be great guys! Thank You!
解决方案
I build a sample in local with your code, there is no problem with ajax or new post request on complete. the two change that I made is this: in form set action
<form id="jquery-form-plugin-test-id" class="form" action="test.php" method="post" novalidate="novalidate">
because I want to see what params post and pass 404 error.
and change input name for description :
<input class="form-control" id="id_description" maxlength="30"
name="desc" placeholder="Project Description" required="required" title="" type="text" />
for sending as a separated param.
you can try your self :
test.php file:
<?php
var_dump($_POST);
index.html :
<!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>
and you see in network tab that params send successfully. even the second post request look like well.
推荐阅读
- javascript - 在 math.Random 函数中创建 IF 语句
- performance - 对于具有顺序复制和分散存储的循环,如何解释 Xeon 处理器的性能不佳?
- php - 合并 2 个具有不同键数的数组
- reactjs - 我可以使用一个状态来引用另一个子组件中一个子组件的状态吗?
- c# - 在 ASP.NET C# 中取消选中 Repeater DataTable 中的行
- javascript - 分配“translateX”值时元素丢失其“rotateZ”值 - CSS
- c++ - 如何遍历 CString 并将其字符与 int 进行比较?
- python - AttributeError:无法获取属性“tokenizer”
- android - 卸载应用程序后android os是否缓存应用程序文件
- python - Python - 比较两个数据框