如何通过javascript执行php

Posted

技术标签:

【中文标题】如何通过javascript执行php【英文标题】:How to execute php through javascript 【发布时间】:2017-03-05 00:43:36 【问题描述】:

我目前正在将 php 与 Backbone.js 一起使用,并且在某些地方我正在使用 PHP 与我的 mysql 服务器交互并使用 Backbone/javascript 填充前端。

这是我正在尝试执行的示例 PHP。

$query="select id,username,message,useremail,date from contact";
$result =mysqli_query($connection,$query);
if ($result) 
    echo '<table id="hor-minimalist-b" summary="Users List">
    <thead>
        <tr>
            <th scope="col">User ID</th>
            <th scope="col">User Name</th>
            <th scope="col">User Message</th>
            <th scope="col">User Email</th>
            <th scope="col">Date</th>
        </tr>
    </thead>
    <tbody>';
    while($resultarray=mysqli_fetch_array($result))
        echo "
        <tr>
            <td>$resultarray['0']</td>
            <td>$resultarray['1']</td>
            <td>$resultarray['2']</td>
            <td>$resultarray['3']</td>
            <td>$resultarray['4']</td>
        </tr>
        ";
    
    echo "</tbody>
    </table>";

一种方法是制作 PHP 文件并发出 ajax 请求以获取 html 输出并附加到 div 容器中。但是由于我有太多的 PHP 代码 sn-ps,我想以某种方式使用 javascript 来减轻我的负担,因为我正在实现骨干网 (http://myurl/#link/feed)。

目前,我尝试了一种丑陋的方式:使用HTML并通过PHP的echo调用javascript函数。

【问题讨论】:

您需要使用 PHP 制作一个 REST API,通过骨干模型和集合使用的不同 url 端点从服务器公开您的数据。 这是我的最终动机。但是将大量代码从 php 转移到模型和集合是很忙的。我正在逐渐拉屎。 另外,PHP 可以返回任何东西,它不限于 HTML。所以你可以返回 javascript 可以轻松解析的 JSON。 逐步将 Backbone 集成到现有的 PHP 网站中是在自取其辱。在单页应用程序中正确使用时,Backbone 会发光。 您能指导我一种使用主干进行数据库查询的顺畅方法吗?是的,我的整个网站都是一个页面应用程序,背后有太多页面为其提供动力。 【参考方案1】:

我的cmets总结:

逐步将 Backbone 集成到现有的 PHP 网站中是 射击自己的脚。正确使用时骨干会发光 在从 RESTful API 提供数据的单页应用程序中。

您需要使用 PHP 制作一个 REST API,公开您的数据 从服务器通过骨干模型使用的不同 url 端点 和收藏。 PHP 可以返回任何东西,它不限于 HTML,所以 您可以返回 javascript 可以轻松解析的 JSON。

如何在 PHP 中使用 Backbone

后端 API

这是一个基于您的代码的非常简单的 PHP 端点。

example_ajax.php

<?php
$query ="select id,username,message,useremail,date from contact";
$result = mysqli_query($query);
$rows = array();
while($r = mysqli_fetch_assoc($result)) 
    $rows[] = $r;


// return the array as JSON so Backbone can automatically parse it.
print json_encode($rows);

见Creating a simple REST API in PHP

有一些 PHP 框架可以为您处理 REST API,例如:

Silex(基于Symfony的微框架) Slim Lumen(轻量级Laravel) Phalcon

前端数据处理

创建一个绑定到我们新创建的端点的自定义集合:

var ContactCollection = Backbone.Collection.extend(
    url: "example_ajax.php",
);

静态模板

并使用 Backbone 视图处理 HTML 模板。

首先准备好HTML模板,可以是服务器上的静态HTML。

<table id="hor-minimalist-b" summary="Users List">
    <thead>
        <tr>
            <th scope="col">User ID</th>
            <th scope="col">User Name</th>
            <th scope="col">User Message</th>
            <th scope="col">User Email</th>
            <th scope="col">Date</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

<script type="text/template" id="contact-template">
    <td><%= id %></td>
    <td><%= username %></td>
    <td><%= message  %></td>
    <td><%= useremail %></td>
    <td><%= date %></td>
</script>

主干视图

然后是意见:

var ContactView = Backbone.View.extend(
    tagName: 'tr',
    template: _.template($('#contact-template').html()),
    initialize: function(options)
        // optional, automatically remove the html of this row only.
        this.listenTo(this.model, 'remove', this.remove);
    ,
    render: function() 
        this.$el.empty().append(this.template(this.model.toJSON()));
        return this;
    ,
);

下面的列表视图使用ContactView 作为子视图。

var ContactListView = Backbone.View.extend(
    el: "#hor-minimalist-b", // uses existing element in the page

    initialize: function(options) 
        // cache a jQuery element to use as a container for the child views.
        this.$body = this.$('tbody');

        // optional, automatically adds a new contact when the collection changes
        this.listenTo(this.collection, 'add', this.renderContact);
    ,
    render: function() 
        this.$body.empty();
        this.collection.each(this.renderContact, this);
        return this; // always return this for chaining
    ,

    renderContact: function(model) 
        var view = new ContactView( model: model );
        this.$body.append(view.render().el);
    ,
);

如何使用

var collection = new ContactCollection(),
    view = new ContactListView( collection: collection );
view.render();

collection.fetch();

.fetch() 函数对类似http://www.example.com/example_ajax.php 的东西进行 GET 调用,它应该返回一个数组。

为什么是 API?为什么不从 JavaScript 发送 SQL 查询?

JavaScript 在客户端运行,您应该永远不要信任。相反,您会在您可以信任的服务器上公开特定的端点。这就是您需要 API 的原因。

从 javascript 发送 SQL 查询是一个坏主意,原因如下:

SQL Injection: 有人可以获取/更改您数据库中的任何内容(包括窃取密码,或将数据库一起核对), 这是您服务器的大门, 缺乏可信验证,或者更难验证 SQL 查询字符串, 紧耦合,例如使得在不同客户端(移动应用、网站、桌面应用等)之间共享查询代码变得更加困难

可以,但不应该。

phpMyAdmin 是一个应用程序示例,它采用用户编写的 SQL 并按原样运行。

如果它在受控环境中,例如本地 Intranet,并且您想从客户端 JavaScript 访问 MySQL,您可以编写一个 php 脚本,该脚本获取请求正文并将其直接传递给 MySQL 数据库,然后返回结果为 JSON。

例如,有一个名为 Squel.js 的库用于构建 SQL 查询字符串。他们在首页上有一个大红框,上面写着:

注意:建议您不要在浏览器端创建查询 在服务器上运行,因为这会大大增加您遭受SQL Injection 攻击的风险。

补充阅读:

Is there any reason not to go directly from client-side Javascript to a database? Can JavaScript connect with MySQL? What exactly is RESTful programming? Best Practices for Designing a Pragmatic RESTful API

【讨论】:

我想,直到出现可以与 mysql 通信 javascript 的新东西,这是我的最佳选择。谢谢你的介绍,我真的很感激。 @unkn0wn 因为评论太长了,所以我通过对我的回答进行了编辑来回复你。我了解您想要实现的目标,当我开始学习 JS 和 PHP 时,我自己也有这些想法。当您最终告诉自己这是一个坏主意并且服务器端和客户端技术各有其职责和能力,并且应该保持在这些范围内时,就会变得更加清晰。 感谢您参考我关于“在 PHP 中创建简单的 REST API”的文章。您还可以在Github 上查看功能齐全的 REST 脚本。【参考方案2】:

简短的回答是:你不能。

PHP 在服务器上执行,JavaScript 在客户端上执行。一旦页面到达浏览器,所有的 PHP 都已被解释。最好的办法是向返回 JSON 的服务发送 AJAX 请求,然后使用 JavaScript 进行处理和显示。

【讨论】:

在我的一些 sn-ps 中,我正在积极使用它。为了尽量减少文件数量,我还在我的 POST 请求中使用了tag 来触发只需要的 sn-ps。一直在寻找更漂亮的方式。【参考方案3】:

如果我理解正确,您希望在某些地方使用 PHP 加载网页的某些部分。可以做到,但根据我的经验,这很复杂,而且不理想。这是您可以做什么的非代码说明。

    使用 PHP 呈现您的 HTML/JavaScript 页面。 (example.php) 拥有一个使用 Ajax 调用 PHP 页面的 JavaScript 函数。您调用的 PHP 页面应该只回显您想要动态创建的所有 HTML。您可以创建一个大字符串变量,并在您准备好返回后回显它。回显将返回给 JavaScript 的 Ajax 调用。 (example_ajax.php 生成您想要的 HTML 并将其回显) 根据需要使用从 example_ajax.php 收到的响应 JavaScript 来更新您的页面。

【讨论】:

这正是我现在正在做的事情。我同意这很丑。 @unkn0wn 这是您唯一的选择。客户端(主干)JavaScript 在客户端浏览器中运行,您的 PHP 代码在您的服务器上运行。他们通信的方式是通过 HTTP。

以上是关于如何通过javascript执行php的主要内容,如果未能解决你的问题,请参考以下文章

如何让使用 document.write() 创建的 JavaScript 执行?

如何在 JavaScript 中使用 JSONP 请求执行 Ajax 调用? [复制]

如何仅在页面加载的 10% 时执行 JavaScript

Selenium c#如何通过JavaScript查找元素?

如何以编程方式监控 Web 浏览器中的 JavaScript 执行?

是否可以通过 selenium webdriver 执行 OnClick javascript 函数而无需单击