Ajax无刷新提交表单并搜索数据库

问题描述：

![图片说明](https://img-ask.csdn.net/upload/201603/22/1458634248_267260.png)图片说明
大家看图也能明白我的意思。页面中包含两个框架，下面的框架就是主要的问题所在。两个下拉列表联动已经会做了，现在想要点击“确定”后提交表单并在下面显示出数据库查询结果，但同时下拉列表不能刷新，保持选择的项目状态。目前点击按钮后会出现第二图的情况，恶心死我了。
我参考Shelley Powershot的《JavaScript学习指南》，可是却没能达到我想要的效果。提交表单是大概只能用post方法了吧……求大神相助，可以提供思路，提供参考文献或者指正我的代码
sd_help.php如下：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body class="font">
    <div align="center"><font size="4px">选择您需要的帮助</font></div><br>
    <form name="search" action="search_db.php" method="post">
    <div align="center">
        <select name="domain" id="domain" onChange="redirec(document.search.domain.options.selectedIndex)">
            <option selected value="0">请选择</option>
            <option value="1">体育</option>
            <option value="2">艺术</option>
            <option value="3">文史</option>
        </select>&nbsp;&nbsp;&nbsp;&nbsp;
        <select name="items" id="items">
            <option value="0" selected>请选择</option>
        </select>&nbsp;&nbsp;
        <input type="submit" value="确定" id="submitButton"/>
        </form>
    </div>
<script language="javascript">
    //获取一级菜单长度
    var groups = document.search.domain.options.length;
    var group = new Array(groups);
    //把一级菜单都设为数组
    for (i=0; i<groups; i++)
    { group[i] = new Array();}
    //定义基本选项
    group[0][0] = new Option("请选择", "0");

    group[1][0] = new Option("足球", "1");
    group[1][1] = new Option("篮球", "2");
    group[1][2] = new Option("乒乓球", "3");

    group[2][0] = new Option("歌唱", "4");
    group[2][1] = new Option("舞蹈", "5");
    group[2][2] = new Option("乐器", "6");

    group[3][0] = new Option("小说", "7");
    group[3][1] = new Option("散文", "8");
    group[3][2] = new Option("诗词", "9");
    //联动函数
    function redirec(x)
    {
    var temp = document.search.items;
    for (i=0;i<group[x].length;i++)
    { temp.options[i]=new Option(group[x][i].text,group[x][i].value);}
    temp.options[0].selected=true;
    }

//<![CDATA[
//全局变量
var xmlHttpObj;
function catchEvent(eventObj,event,eventHandler){
    if(eventObj.addEventListener){
        eventObj.addEventListener(event,eventHandler,false);
    }else if(eventObj.attachEvent){
        event="on"+event;
        eventObj.attachEvent(event,eventHandler);
    }
}

catchEvent(window,"load",function(){
    //document.getElementById("helps").style.display="block";
    document.getElementById("items").onchange=populateList;
    //document.getElementById("submitButton").style.display="none";
});
//创建XHR对象
function getXmlHttp(){
    var xmlhttp=null;
    if(window.XMLHttpRequest){
        xmlhttp=new XMLHttpRequest();
        if(xmlhttp.overrideMimeType){
            xmlhttp.overrideMimeType('text/html');
        }

    }else if(window.ActiveObject){
        xmlhttp=new ActiveObject("Microsoft.XMLHTTP");
    }
    return xmlhttp;
}
//准备并发送XHR请求
function populateList(){
    var items=document.getElementById("items").value;
    var url='search_db.php';
    var qry="items="+items;
    //如果xmlHttpObj为空
    if(!xmlHttpObj)
        xmlHttpObj=getXmlHttp();
    if(!xmlHttpObj) return;

    xmlhttp.open('POST',url,true);
    xmlhttp.onreadystatechange=getItems;
    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xmlhttp.send(qry);
}
//处理返回的数据
function getItems(){
    if(xmlHttpObj.readyState==4&&xmlHttpObj.status==200){
        document.getElementById('helps').innerHTML=xmlHttpObj.responseText;
    }else if(xmlHttpObj.readyState==4&&xmlHttpObj.status!=200){
        document.getElementById('helps').innerHTML='请求出错误！';
    }
}
//]]>
</script>
    <div align="center">
        <table><tr><td id="helps"></td></tr></table>
    </div>
</body>

search_db.php如下（暂为演示，所以没有执行数据库查询）：

 <?php
    if(empty($_QUEST['items'])){
        echo "未传入items值！悲剧！";
    } else echo ($_QUEST['items']);
?>

答

现在这个问题搞清楚了，之前的方法看来好像搞复杂了。

 //异步请求 
    document.getElementById("items").onchange = function() { 
    var request = new XMLHttpRequest();
    request.open("POST", "search_db.php");
    var data = "items=" + document.getElementById("items").value;
    request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    request.send(data);
    request.onreadystatechange = function() {
        if (request.readyState===4) {
            if (request.status===200) { 
                document.getElementById("helps").innerHTML = request.responseText;
            } else {
                document.getElementById("helps").innerHTML ='请求出错误！';
            }
        } 
    }
    }

另外，修改后的页面去掉了submitButton提交表单按钮，因为一旦提交表单，就会刷新页面，跳转到其他页面，所以去掉了；再通过Ajax异步获取items（第二个下拉列表）值的变化并发送请求、发送参数，PHP脚本处理后返回本页面。

答

图片说明
这就是点击按钮后会刷新下面整个页面的情况，连下拉列表都没了，而且看来参数也没有传递好

答

用Ajxa就行，把选框的值传到后台，处理之后得到数据在显示出来

Ajax无刷新提交表单并搜索数据库

相关推荐