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>

获得输入框的值 赋值给变量key:

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

再通过ourGet.js里面的下面这句代码:

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

把输入的关键字传递给PHP代码的:

$keyWord = $_GET[‘keyWord‘]

当然,要实现把关键字传递给PHP并提交到服务器,是在我们点击了Search按钮之后的。 
我在Search按钮处给它写了个点击事件,每次我点击,就调用ourGet.js里面的getData()函数

onClick="getData()"

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(‘服务器出错‘);
                    },
                });
            }

原文地址:https://www.cnblogs.com/dudu123/p/10044759.html

时间: 2024-11-05 15:51:23

html与js和php之间实现数据交互的相关文章

java与c/c++之间的数据交互-----jni点滴

淡泊明志.宁静致远 A Diamond is just a piece of Coal that did well under Pressure. java与c/c++之间的数据交互-----jni点滴[转] 最近作一个tiemsten数据库的项目,用到了jni技术.在这个项目中,我们用java来写界面和业务逻辑,用c语言写数据库odbc访 问.单纯的odbc其实没有什么难的,但是在java和c之间进行数据传递是比较麻烦的事情.两者之间数据的传递有这样几种情况:java和c之间基本数 据类型的交

网页开发的阶段总结(四)--JS与PHP之间大数据的传送

在前面 的网页开发的阶段总结(三)中,我们知道JS与PHP之间直接互相调用,往往有很多不便,而且一次只能传送一个数据结果进行返回.而通过ajax方法可以实现JS一次性读取php的所传送过来的大量数据.通过提交表单的方式,让php可以一次性读取JS的大量数据. 1.借用AJAX方法,通过php读取数据库将大量数据显示在网页客户端上. a.页面一加载完,执行函数Gett(),代码如下: <html> <head> <meta http-equiv="Content-Ty

java不同对象之间的数据交互(通用)

??java中万物皆对象.不论你是线程,还是异步任务,还是...都可以用以下的三种通用方法来进行对象间数据的交互.当然android相比java有自己独特的数据交互方式,这些会在后面的文章中讲到,本篇文章意在对java通用的对象间的数据交互进行总结. 一.通过构造函数传递 ??构造函数很大程度上是方便参数的传递,以达到在新建对象的时候,同时对这个对象的一些属性进行初始化.我们经常需要根据自己的需要,重载类的构造方法.我们可以在对象初建的时候把它需要的数据传递给它,以实现不同对象之间数据的交互.

Android进阶之Fragment与Activity之间的数据交互

1 为什么 因为Fragment和Activity一样是具有生命周期,不是一般的bean通过构造函数传值,会造成异常. 2 Activity把值传递给Fragment 2.1 第一种方式,也是最常用的方式,就是使用Bundle来传递参数 (1)宿主Activity/FragmentAdapter中: Bundle bundle = new Bundle(); bundle.putString(Constant.INTENT_ID, productId); Fragment fragment =

UWP开发:APP之间的数据交互(以微信为例)

目录 说明 UWP应用唤醒方式 跟微信APP交互数据 APP之间交互数据的前提 说明 我们经常看到,在手机上不需要退到桌面,APP之间就可以相互切换,并且可以传递数据.比如我在使用知乎APP的时候,需要使用新浪微博账号登录,点击“微博登录”后,系统自动唤醒新浪微博APP,并将知乎请求登录的数据传给了微博APP(微博APP界面上可以看到是知乎请求登录授权),见下图:    如上所示,依次点击“微博登录”.“确定”,手机界面自动来回切换,不需要人为干预.另外,如果我们在知乎看到一篇有意思的文章,需要

Vue2.0子同级组件之间数据交互

接着我们进入Demo,首先我们可以删除掉模板项目中src/components/Hello.vue,然后在App.vue中删除对于Hello子组件的注册和使用还有一些其他无关紧要的东西,此时的App.vue应为这样 一 .我们先来创建中央事件总线,在src/assets/下创建一个eventBus.js,内容如下(eventBus中我们只创建了一个新的Vue实例,以后它就承担起了组件之间通信的桥梁了,也就是中央事件总线.) 二 . 创建一个firstChild组件,引入eventBus这个事件总

Android学习系列之(五)Activity之间的数据传递

前言:前面我们已经掌握了 Activity 的基本使用,但是那都是在同一个 Activity 中进行操作的.那么若我们要在不同 Activity 之间进行数据交互,这又如何实现?那现在我们依旧以模拟登录注册这一个例子来进行说明 一.需求说明: 模拟用户的登录注册行为,用户注册信息后,将注册时的账号.密码这一数据传递到登陆界面. 二.代码实现: 1.布局文件代码: activity_main.xml: <?xml version="1.0" encoding="utf-8

Hybrid小程序混合开发之路 - 数据交互

HTML+CSS是历史悠久.超高自由度.控制精准.表现能力极强.编码简单.学习门槛超低.真跨平台的一种UI界面开发方式. 本文介绍的是微信小程序和H5混合开发的一种数据交互方式. 很多应用在原生界面中混杂着HTML界面 记得xp时代的QQ,有些界面偶尔会弹出熟悉的js错误对话框,还能右键弹出熟悉的IE6的右键菜单,伪装的挺好,差点没认出来,现在的QQ就不知道了. 美团.淘宝这些拥有几乎无限界面的手机App,顶部进度条一亮,这是一个H5 没谁了! Electron!好嗨哟~ 数据交互 使用了HTM

转:使用基于Http的消息代替WebService的数据交互

http://blog.csdn.net/cyq1984/article/details/38041671 系统间交互的工作,随着信息化建设的发展,以及业界对SOA的认识及其带来的低TOC(总体拥有成本)等优势,越来越受到信息化水平较高的用户的重视. 这里先抛开SOA这样的架构规划,单纯就系统间整合的协议进行讨论. 系统间的交互或者成为整合(互联互通),早在信息化系统诞生的时候,就已经出现,只是并不明显,或者由于早期开发平台.开发语言等的单一性,这种需求并没有非常大的爆发出来. 随着信息化建设的