Jquery/Ajax 表单 Post 数据无效
Jquery/Ajax form Post data is not working
我不是 Jquery 方面的专家。我构建了一个 4 步 html 形式,例如
<form id="msform" enctype="multipart/form-data">
<fieldset id="publish1" data-check-id="1">
//some inputs
</fieldset>
<fieldset id="publish2" data-check-id="2">
//some inputs
</fieldset>
<fieldset id="publish3" data-check-id="3">
//some inputs
</fieldset>
<fieldset id="publish4" data-check-id="4">
<input type="submit" class="submit action-button pull-right top-35" value="Publish"/>
</fieldset>
</form>
在我的 .js 文件中写了一些 Jquery 验证后,我试图通过 ajax 将我的数据传递到 php 文件。我的 formData
函数如下所示:
<script>
function formData() {
var serializedValues = jQuery("#msform").serialize();
var form_data = {
action: 'ajax_data',
type: 'post',
data: serializedValues,
};
jQuery.post('mypath/insert.php', form_data); //where data should be sent
return true;
}
</script>
四处搜索,我尝试构建 php 文件接收具有此结构的数据:
<?php
if (isset($_POST['data'])) {
post_things();
return true;
}
function post_things() {
$title = trim($_POST['form_title']);
// where form_title is the input[name] of what I want get, serialised into jquery serializedValues variable
//other similar inputs
//do something with $title and other $variables
}
?>
我已经初始化了验证和 ajax 函数,执行如下操作:
<script>
$(document).ready(function () {
msform_init(); //this validate form step by step (it's working!)
$('#msform').submit(function (event) {
if (form_completeCheck() && true) { //This check if something empty
formData();
if (formData() && true) {
window.location.replace("//some redirection to success");
} else {
window.location.replace("//some redirection to failure");
}
} else {
event.preventDefault();
}
})
})
</script>
问题是,当我点击提交时,我被重定向到 url 是我的路径的页面? ALL_MY_DATA_SERIALISED。
我的错误在哪里?由于我的无知,我看不到它。是在 jquery/ajax 函数中,在 php 文件中还是在我的 html 中?
预先感谢您的帮助。
HTML 脚本
<form id="msform" enctype="multipart/form-data">
<input type="hidden" name="action" value="do_action"/>
<fieldset id="publish1" data-check-id="1">
//some inputs
</fieldset>
<fieldset id="publish2" data-check-id="2">
//some inputs
</fieldset>
<fieldset id="publish3" data-check-id="3">
//some inputs
</fieldset>
<fieldset id="publish4" data-check-id="4">
<input type="button" id="do_action" class="submit action-button pull-right top-35" value="Publish"/>
</fieldset>
</form>
JavaScript
$("#do_action").click(function(){
$.ajax({
type:'POST',
data:$("#msform").serialize();
url:'<<php script url>>',
success:function(data){
alert(data);
}
});
});
php 脚本
<?php
if(isset($_POST['action'])){
post_things($_POST);
return true;
}
function post_things($request){
echo "<pre>";
print_r($request);
echo "</pre>";
}
?>
您只需要在事件侦听器的顶部执行 event.preventDefault()
:
$('#msform').submit(function(event){
event.preventDefault();
if(form_completeCheck() && true){ //This check if something empty
formData();
if(formData() && true){
window.location.replace("//some redirection to success");
} else {
window.location.replace("//some redirection to failure");
}
}
})
您被重定向的原因是因为您正在提交表单。
因为在您的 <form id="msform" enctype="multipart/form-data">
中您没有定义任何操作,所以它会提交给自己。
您必须使用 preventDefault() 阻止表单提交。
$('#msform').submit(function(event){
event.preventDefault(); //Add this line
..............
我不是 Jquery 方面的专家。我构建了一个 4 步 html 形式,例如
<form id="msform" enctype="multipart/form-data">
<fieldset id="publish1" data-check-id="1">
//some inputs
</fieldset>
<fieldset id="publish2" data-check-id="2">
//some inputs
</fieldset>
<fieldset id="publish3" data-check-id="3">
//some inputs
</fieldset>
<fieldset id="publish4" data-check-id="4">
<input type="submit" class="submit action-button pull-right top-35" value="Publish"/>
</fieldset>
</form>
在我的 .js 文件中写了一些 Jquery 验证后,我试图通过 ajax 将我的数据传递到 php 文件。我的 formData
函数如下所示:
<script>
function formData() {
var serializedValues = jQuery("#msform").serialize();
var form_data = {
action: 'ajax_data',
type: 'post',
data: serializedValues,
};
jQuery.post('mypath/insert.php', form_data); //where data should be sent
return true;
}
</script>
四处搜索,我尝试构建 php 文件接收具有此结构的数据:
<?php
if (isset($_POST['data'])) {
post_things();
return true;
}
function post_things() {
$title = trim($_POST['form_title']);
// where form_title is the input[name] of what I want get, serialised into jquery serializedValues variable
//other similar inputs
//do something with $title and other $variables
}
?>
我已经初始化了验证和 ajax 函数,执行如下操作:
<script>
$(document).ready(function () {
msform_init(); //this validate form step by step (it's working!)
$('#msform').submit(function (event) {
if (form_completeCheck() && true) { //This check if something empty
formData();
if (formData() && true) {
window.location.replace("//some redirection to success");
} else {
window.location.replace("//some redirection to failure");
}
} else {
event.preventDefault();
}
})
})
</script>
问题是,当我点击提交时,我被重定向到 url 是我的路径的页面? ALL_MY_DATA_SERIALISED。 我的错误在哪里?由于我的无知,我看不到它。是在 jquery/ajax 函数中,在 php 文件中还是在我的 html 中? 预先感谢您的帮助。
HTML 脚本
<form id="msform" enctype="multipart/form-data">
<input type="hidden" name="action" value="do_action"/>
<fieldset id="publish1" data-check-id="1">
//some inputs
</fieldset>
<fieldset id="publish2" data-check-id="2">
//some inputs
</fieldset>
<fieldset id="publish3" data-check-id="3">
//some inputs
</fieldset>
<fieldset id="publish4" data-check-id="4">
<input type="button" id="do_action" class="submit action-button pull-right top-35" value="Publish"/>
</fieldset>
</form>
JavaScript
$("#do_action").click(function(){
$.ajax({
type:'POST',
data:$("#msform").serialize();
url:'<<php script url>>',
success:function(data){
alert(data);
}
});
});
php 脚本
<?php
if(isset($_POST['action'])){
post_things($_POST);
return true;
}
function post_things($request){
echo "<pre>";
print_r($request);
echo "</pre>";
}
?>
您只需要在事件侦听器的顶部执行 event.preventDefault()
:
$('#msform').submit(function(event){
event.preventDefault();
if(form_completeCheck() && true){ //This check if something empty
formData();
if(formData() && true){
window.location.replace("//some redirection to success");
} else {
window.location.replace("//some redirection to failure");
}
}
})
您被重定向的原因是因为您正在提交表单。
因为在您的 <form id="msform" enctype="multipart/form-data">
中您没有定义任何操作,所以它会提交给自己。
您必须使用 preventDefault() 阻止表单提交。
$('#msform').submit(function(event){
event.preventDefault(); //Add this line
..............