使用ajax提交表单 [英] Submit form using ajax
问题描述
我正在尝试使用jquery向数据库提交值.我是ajax的新手，但必须使用ajax.
I'm trying to submit values to a database using jquery. I'm new to ajax but I'm required to do it with ajax.
到目前为止，这是我已经完成的php代码
This is what I've done so far my php code is
function insertSeries()
{
$options = array(
'user' => $_POST['user'],
'email' => $_POST['email'],
'summary' => $_POST['summary'],
'due_date' => $_POST['due_date'],
'problem_type' => $_POST['problem_type'],
'status' => $_POST['status']
);
$sql = "insert into ticket_summary('user','email','summary','due_date','problem_type','status') Values (?,?,?,?,?,?)";
$result = mysql_query($sql, $options) or die('Could not insert data');
}
我的html代码是
<?php
include 'eric_api.php';
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/jquery.js"></script>
<script src="js/api_calls.js"></script>
<link rel="stylesheet" href="css/normalizer.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="wrapper">
<h1>Ticketing System</h1>
<div>
<div id="ticket_form_wrapper">
<form id="insert_ticket" method="post" action="">
<p>
<label for="user">User</label>
<br />
<input type="user" id="user" class="post_fields" />
</p>
<p>
<label for="email">Email</label>
<br />
<input type="email" id="email" class="post_fields" />
</p>
<p>
<label for="summary">Summary</label>
<br />
<input type="summary" id="summary" class="post_fields" />
</p>
<p>
<label for="due_date">Due Date</label>
<br />
<input type="due_date" id="due_date" class="post_fields" />
</p>
<p>
<label for="problem_type">Problem Type</label>
<br />
<input type="problem_type" id="problem_type" class="post_fields" />
</p>
<p>
<label for="status">Status</label>
<br />
<input type="status" id="status" class="post_fields" />
</p>
<p>
<input type="submit" id="submit" value="Submit" />
<input type="button" onclick="window.location='index.php'" value="Go to List"/>
<div class="form_result"> </div>
</p>
</form>
</div>
</div>
</body>
</html>
这是我使用jquery的ajax
And here's my ajax using jquery
$('#insert_ticket').submit(function(e){
var postData = $(this).serialize();
alert(postData);
$.ajax({
type: 'POST',
url: 'http://localhost/api/eric_api.php?q=insertseries',
data: postData,
success: function(response){
$('#insert_ticket').find('.form_result').html(response);
},
error: function(){
alert('error');
}
});
e.preventDefault();
});
我不知道我在做什么错.任何帮助将不胜感激
I don't know what I'm doing wrong. Any help would be greatly appreciated
推荐答案
与其干扰表单的Submit事件，不如点击事件.要对现有设置进行最小的更改，只需将点击处理程序添加到表单提交按钮.处理程序中的第一件事是调用e.preventDefault().您必须在处理程序中显式选择表单以序列化数据.然后，将您现有的ajax调用移到该处理程序中，它应该可以正常工作.另外，请确保您实际上在PHP代码中的某个地方调用了insertSeries().
Instead of interfering with the form's submit event, interfere with a click event instead. To make minimal changes to your existing setup, just add the click handler to the form submit button. First thing inside of the handler, call e.preventDefault(). You'll have to explicitly select the form inside the handler to serialize the data. Then, move your existing ajax call into that handler, and it should work fine. Also, make sure that you are actually calling insertSeries() somewhere in your PHP code.
欢呼
这篇关于使用ajax提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
