我的 index.php 页面上有搜索表单。我想要做什么，当我单击搜索时，我想在另一个名为 search_result.php 的页面上显示结果。我使用 jQuery 进行搜索表单，并验证两个字段，即 gender 和 age。我是 jQuery 新手。请帮忙。谢谢。
我的index.php页面是
<script type="text/javascript">
$(document).ready(function(){
$("#search_form").submit(function(e)
{
var formObj = $(this);
var formURL = formObj.attr("action");
if(window.FormData !== undefined)
{
var formData = new FormData(this);
$.ajax({
url: formURL,
type: 'GET',
dataType: "html", //expect html to be returned
success: function(data, textStatus, jqXHR)
{
$("#multi-msg-search").html('<pre><code>'+data+'</code></pre>');
},
error: function(jqXHR, textStatus, errorThrown)
{
$("#multi-msg-search").html('<pre><code class="prettyprint">AJAX Request Failed<br/> textStatus='+textStatus+', errorThrown='+errorThrown+'</code></pre>');
}
});
e.preventDefault();
e.unbind();
}
});
var v_gender = 1;
var v_age = 1;
var v_age1 = 1;
$("#submit-btn").click(function()
{
//gender
if($("#s_gender").val() == ''){
$("#s_gender").css("border","2px solid red");
$("#s_gender_error").show();
v_gender = 1;
}else{
$("#s_gender").css("border","2px solid green");
$("#s_gender_error").hide();
v_gender = 0;
}
//age
if($("#s_age").val() == ''){
$("#s_age").css("border","2px solid red");
$("#s_age_error").show();
v_age = 1;
}else{
$("#s_age").css("border","2px solid green");
$("#s_age_error").hide();
v_age = 0;
}
//age1
if($("#s_age1").val() == ''){
$("#s_age1").css("border","2px solid red");
$("#s_age1_error").show();
v_age1 = 1;
}else{
$("#s_age1").css("border","2px solid green");
$("#s_age1_error").hide();
v_age1 = 0;
}
if(v_gender == 0 && v_age == 0 && v_age1 == 0 ){
//sending form from here
$("#search_form").submit();
} //my code ends here
});
});
</script>
<!-- ============ Home quick search form starts ===================== -->
<div class="profile_search">
<div class="container wrap_1">
<form action="search_result.php" method="GET" id="search_form" name="search_form" enctype="multipart/form-data" >
<div class="search_top">
<div class="inline-block">
<label class="gender_1">I am looking for :</label>
<div class="age_box1" style="max-width: 100%; display: inline-block;" >
<select id="s_gender" name="s_gender">
<option value="">* Select Gender</option>
<?php
$get_gender = "SELECT * FROM genders";
$run_gender = mysqli_query($con, $get_gender);
while ($row_gender = mysqli_fetch_array($run_gender)){
$gen_id = $row_gender['gender_id'];
$gen_title = $row_gender['gender_title'];
echo "<option value='$gen_title' class='$gen_title'>$gen_title</option>";
}
?>
</select>
</div>
</div>
<div class="inline-block">
<label class="gender_1">Religion :</label>
<div class="age_box1" style="max-width: 100%; display: inline-block;" >
<select id="s_religion" name="s_religion">
<option value="">Doesn't Matter</option>
<option value="Hindu">Hindu</option>
<option value="Sikh">Sikh</option>
<option value="Chritian">Chritian</option>
<option value="Budhist">Budhist</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="inline-block">
<label class="gender_1">Occupation :</label>
<div class="age_box1" style="max-width: 100%; display: inline-block;" >
<select id="s_occupation" name="s_occupation">
<option value="">Doesn't Matter</option>
<?php
$get_occup = "SELECT * FROM occupation";
$run_occup = mysqli_query($con, $get_occup);
while ($row_occup = mysqli_fetch_array($run_occup)){
$occ_id = $row_occup['occ_id'];
$occ_title = $row_occup['occ_name'];
echo "<option value='$occ_title' class='$occ_title'>$occ_title</option>";
}
?>
</select>
</div>
</div>
</div>
<div class="inline-block">
<div class="age_box2" style="max-width: 220px;">
<label class="gender_1">Age :</label>
<input class="transparent" placeholder="From:" style="width: 34%;" type="text" value="" id="s_age" name="s_age"> - <input class="transparent" placeholder="To:" style="width: 34%;" type="text" value="" id="s_age1" name="s_age1">
</div>
</div>
<div class="inline-block">
<label class="gender_1">Qualification :</label>
<div class="age_box1" style="max-width: 100%; display: inline-block;">
<select id="s_qualification" name="s_qualification">
<option value="">Doesn't Matter</option>
<?php
$get_educ = "SELECT * FROM education";
$run_educ = mysqli_query($con, $get_educ);
while ($row_ed = mysqli_fetch_array($run_educ)){
$educ_id = $row_ed['edu_id'];
$educ_title = $row_ed['edu_name'];
echo "<option value='$educ_title' class='$educ_title'>$educ_title</option>";
}
?>
</select>
</div>
</div>
<div class="submit inline-block">
<input id="submit-btn" class="hvr-wobble-vertical" type="submit" name="home_quick_search" value="Find Matches">
</div>
</form>
</div>
</div>
<!-- ============ Home quick search form ends ===================== -->
search_result.php 文件是；
<div class="col-md-9 profile_left">
<div class="paid_people">
<h1>Profiles You Searched</h1>
<div class="row_1">
<?php
date_default_timezone_set('Asia/Kolkata');
require_once("includes/config.php");
global $con;
if(isset($_GET['home_quick_search'])){
$search_gender = $_GET['s_gender'];
$search_relegion = $_GET['s_religion'];
$search_occupation = $_GET['s_occupation'];
$search_age = $_GET['s_age'];
$search_age1 = $_GET['s_age1'];
$search_qualification = $_GET['s_qualification'];
$get_user = "SELECT * FROM profile_details WHERE YEAR(CURDATE())-YEAR(dob) BETWEEN '%$search_age%' AND '%$search_age1%' OR gender LIKE '%$search_gender%' OR main_caste LIKE '%$search_relegion%' OR education_type like '%$search_qualification%' OR occupation like '%$search_occupation%'";
$run_user = mysqli_query($con, $get_user);
while ($row_user = mysqli_fetch_array($run_user)){
$u_id = $row_user['user_id'];
$u_pid = $row_user['profile_id'];
$u_fname = $row_user['first_name'];
$u_relegion = $row_user['main_caste'];
$u_city = $row_user['city'];
$u_image = $row_user['photo'];
$u_dob = $row_user['dob'];
echo'
<div class="col-sm-6 paid_people-left">
<ul class="profile_item">
<a href="view_profile.php?userdetail_id=$u_id">
<li class="profile_item-img">
<img src="users-photo/resized_$u_image" class="img-responsive" alt="$u_fname"/>
</li>
<li class="profile_item-desc">
<h4>Profile ID: $u_pid</h4>
<p>Age: $u_dob Yrs, $u_relegion</p>
<h5>View Full Profile</h5>
</li>
<div class="clearfix"> </div>
</a>
</ul>
</div>
<div class="clearfix"> </div>
';
}
}
?>
</div>
</div>
最佳答案
Create a php script to receive http requests and fetch data from the database
Create a php script called api.php on your server
Copy and paste the example below and save it
创建客户端脚本以使用 JQuery AJAX 从 API 脚本获取数据
在同一目录中创建一个名为 client.php 的 html 脚本，其中包含以下内容
创建可以通过jquery获取的db数据集
<h2> Client example </h2>
<h3>Output: </h3>
<div id="output">this element will be accessed by jquery and this text replaced</div>
<script id="source" language="javascript" type="text/javascript">
$(function ()
{
//-----------------------------------------------------------------------
// 2) Send a http request with AJAX http://api.jquery.com/jQuery.ajax/
//-----------------------------------------------------------------------
$.ajax({
url: 'api.php', //the script to call to get data
data: "", //you can insert url argumnets here to pass to api.php
//for example "id=5&parent=6"
dataType: 'json', //data format
success: function(data) //on recieve of reply
{
var id = data[0]; //get id
var vname = data[1]; //get name
$('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname); //Set output element html
//recommend reading up on jquery selectors they are awesome
// http://api.jquery.com/category/selectors/
}
});
});
测试代码床 在浏览器中转到 client.php，设置和测试后，您应该看到以下内容
id:1 名称:电源
关于javascript - 如何使用 PHP mySQL 和 jQuery 在另一个页面上显示搜索结果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42145469/