获取jQuery和PHP一起工作的形式? [英] Getting jquery and php work together with forms?
问题描述
所以我有一个简单的问题，但我找不到答案.
So i have a simple question, but i cant find the answer to it.
我有一个表单，用户可以在其中输入一些内容到文本字段中，然后单击值为添加"的提交按钮.右侧将有一个列表，每当用户单击添加时，都会在右侧列表中添加带有淡入淡出动画的元素.
I have a form in which a user types something into the textfield and clicks the submit button with the value "Add". There will be list to the right and every time the user clicks add, there will be element added to the list on the right with a fade in animation.
我正在使用php制作它，以便每次用户单击添加时，它都会查询数据库并找到用户正在寻找的内容.并且如果它不在数据库中，则将其插入数据库中.
I'm using php to make it so that every time the user clicks add, it queries the databse and finds what the user is looking for. And if it isnt in the database, then insert it into the database.
当用户单击添加"时，我正在使用javascript/jquery淡入淡出动画.
I'm using javascript/jquery to have the fade in animation when the user clicks "Add".
我知道如何单独执行这些操作，但是当我单击添加"按钮(提交"按钮)时，整个页面都会刷新，php可以正常工作，但是没有动画.
I know how to do these things individually, but when i click the Add button (the submit button), the entire page refreshes, php works fine, but there was no animation.
我尝试在jquery上使用preventDefault()，并且动画效果很好，但是php代码没有注册?我将如何做到这一点，以便php和javascript不会互相中断?这和ajax有关系吗?谢谢
I try using preventDefault() on jquery, and the animation works fine, but the php code didnt register? How would i make it so that the php and javascript dont cut each other off? Does this have anything to do with ajax? Thanks
推荐答案
这是我想到的一个示例.希望对您有所帮助.
Here is an example that I came up with. Hopefully that can be helpful to you.
这是您的表单所在的位置，并且将显示添加的项目.
This is where your form is and where added items will be displayed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page Title</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
<!--
jQuery(function($) {
// Declare DOM elements for quick access
var itemsList = $('#items-list'),
searchInput = $('#search-input');
// click event handler for the 'Add' button
$('#add-btn').click(function(e) {
// Prevent the form from being sent
e.preventDefault();
var searchValue = searchInput.val();
// Send the AJAX request with the search parameter
$.post('search.php', {
search: searchValue
},
function(data, textStatus) {
// data is returned as a json object
if (data.found) {
// Create a new hidden element into the list
// and make it fade in
$('<p class="item">'+searchValue+'</p>').hide()
.appendTo(itemsList)
.fadeIn();
}
}, 'json'
});
});
});
//-->
</script>
</head>
<body>
<form action="index.php" method="post" id="search-form">
<div>
<input type="text" name="search" id="search-input">
<input type="submit" id="add-btn" value="Add">
<div id="items-list"></div>
</div>
</form>
</body>
</html>
search.php
的内容
Content of search.php
<?php
// AJAX Request?
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
// Prepare the reponse
$response = array('found' => FALSE);
// Check that the search parameter was provided
$search = filter_input(INPUT_POST, 'search', FILTER_SANITIZE_STRING);
if (!empty($search)) {
// Note: We'll assume a connection to a MySQL database
// with the following constant already declared
$mysqli = new mysqli(DB_HOSTNAME, DB_USERNAME, DB_PASSWORD, DB_NAME);
// Make sure that the connection was successful
if (!$mysqli->connect_error) {
$query = "SELECT id, keyword FROM search_table WHERE keyword = ?";
// Check if the search keyword already exists
$stmt = $mysqli->prepare($query);
$stmt->bind_param('s', $search);
$stmt->execute();
// Create a new entry if not found
if (0 == $stmt->num_rows()) {
$query = "INSERT INTO search_table(keyword) VALUES(?)";
$stmt = $mysqli->prepare($query);
$stmt->bind_param('s', $search);
$response['found'] = $stmt->execute();
}
else {
$response['found'] = TRUE;
}
}
}
echo json_encode($response);
}
这未经测试，所以如果您遇到任何问题，请告诉我.
This is not tested so let me know if you encounter any issues.
干杯
这篇关于获取jQuery和PHP一起工作的形式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
