html与js和php之间实现数据交互

<div class="top3"> ???????????????<input id="KeyWord" type="text" class="form1" name="keyWord" value="请输入关键字" ?onfocus="javascript:if(this.value==‘请输入关键字‘)this.value=‘‘;"> ???????????????<input type="button" ?class="form2" name="submit" onClick="getData()" value="Search"></div>

<div id="divPicture"></div>

var key = document.getElementById(‘KeyWord‘).value.trim();

url:"search.php?keyWord="+key

$keyWord = $_GET[‘keyWord‘]

function getData(){ ???var key = document.getElementById(‘ourKeyWord‘).value.trim(); ???$.ajax({ ???????url:"search.php?keyWord="+key, ???????//data是成功返回的json串 ???????success:function(data,status){ ???????????$(‘#divPicture‘).html("");//清空上一个div ???????????var obj = eval( ‘(‘ + data + ‘)‘ );//把json串解析成json对象 ???????????var len = obj.length; ???????????for(var i=0;i<len;i++){ ???????????????var img = document.createElement("img");//创建一个img对象 ???????????????img.src = obj[i]; ???????????????var div = document.getElementById("divPicture"); ???????????????div.appendChild(img); ???????????} ???????}, ???????error:function(data,status){ ???????????alert(‘失败‘); ???????} ???}); ???//alert(‘nihao‘);}

　　switch($action) { ???????case ‘init_data_list‘: ???????????init_data_list(); ???????????break; ???????case ‘add_row‘: ???????????add_row(); ???????????break; ???????case ‘del_row‘: ???????????del_row(); ???????????break; ???????case ‘edit_row‘: ???????????edit_row(); ???????????break; ???}

 //查询方法 ???function init_data_list(){ ???????//测试 运行crud.html时是否可以获取到 下面这个字符串 ???????/*echo "46545465465456465";*/ ???????????????//查询表 ???????$sql = "SELECT * FROM `t_users`"; ???????$query = query_sql($sql); ???????while($row = $query->fetch_assoc()){ ???????????$data[] = $row; ???????} ???????????????$json = json_encode(array( ???????????"resultCode"=>200, ???????????"message"=>"查询成功！", ???????????"data"=>$data ???????),JSON_UNESCAPED_UNICODE); ???????????????//转换成字符串JSON ???????echo($json); ???}

 　　　　　　function searchData() { ???????????????var search_url = "./php/data.php"; ???????????????//url 中问号后面的参数 action，这个对象就是查询的参数 ???????????????var dataParam = { ???????????????????action: "init_data_list" ???????????????}; ???????????????$.ajax({ ???????????????????type: "get", ???????????????????url: search_url, ???????????????????data: dataParam, ???????????????????dataType: ‘json‘, ???????????????????contentType: ‘application/json; charset=utf-8‘, ???????????????????success: function(data) { ???????????????????????//测试是否可以拿到php中的数据 ???????????????????????console.log(data); ???????????????????????//遍历这个数组 ???????????????????????if(data.resultCode == 200) { ???????????????????????????var itemArr = data.data; ???????????????????????????for(var i = 0; i < itemArr.length; i++) { ???????????????????????????????var item = itemArr[i]; ???????????????????????????????console.log(item); ???????????????????????????} ???????????????????????} ???????????????????}, ???????????????????error: function(data) { ???????????????????????alert(‘服务器出错‘); ???????????????????}, ???????????????}); ???????????}