javascript - 将数据从浏览器发送到服务器并返回

标签 javascript html data-binding client-server restful-architecture

我是 C++ 开发人员,很长时间以来我都没有真正跟进过任何与 Web 相关的开发。我有一个我想实现的项目,实际上是作为 catch 这些技术的目标。我的项目是这样的:

  • 在浏览器中显示一些内容(例如使用 Canvas 和 WebGL 的 3D 场景的内容),在页面上有一个按钮。单击按钮时,将数据发送到服务器(例如相机位置),在服务器上渲染图像(使用一些离线高质量渲染解决方案),将图像返回给浏览器,最后显示它在 Canvas 上。

我相信我可以用 WebGl、canvas 和 HTML 5 等简单的东西来填补空白。我熟悉其中一些技术,并且可以学习。我完全迷失的地方是用于或需要做一些事情的技术,例如将数据发送到服务器,在那里处理它们,并将一些结果发送回客户端。现在我当然已经在 Web 上做了一些研究,但是那里的东西太多了,真的很难知道朝哪个方向发展。它们是大量的库、API、技术等。

我怀疑我需要使用 JavaScript、DOM、HTML5 的某种组合……但如果有人以前做过或知道它应该如何工作,可以为我指明正确的方向,我将不胜感激。我真的在寻找一些基本的东西,如果可能的话,不使用某种第 3 方 API。我不想做简单的复杂事情,发送数据,处理,发回显示。我的目标是理解原理,而不是制作专业或 super 强大的东西。我这样做是出于教育目的(学习和理解)。

我阅读了有关 RESTFul 的内容,但我仍然不确定这是否是我需要的。真的,如果有人可以简单地向我描述这个项目所需的基本技术组件,给我指出文档、教程、示例,给我应该阅读的零碎技术的名称,我将不胜感激。

我意识到这个问题的范围非常大(而且我应该在之前完成我的功课而不是现在有多年的知识来 catch )。我相信尽管这个问题对许多人来说可能会很感兴趣。我还 promise ,当我已经弄明白并开始工作时,我会发布我的发现,为什么不发布我的工作示例。

谢谢。

最佳答案

不是答案,只是包含代码的建议/想法。结构化/格式化的评论。

不确定如何在 C++ 中使用/编码它们,但这只是渲染 HTML 和实现 javascript 代码的问题。

要点是:

加载 jQuery 库。一种方法是:

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>

为您的 jQuery 脚本使用 javascript 代码块:

<script type="text/javascript">
    $(document).ready(function() {

        $('#mybutton').click(function() {
            var pic = $('image_selector').val();
            $.ajax({
                type: "POST",
                url: "ind.php",
                data: "img=" + pic
            })
            .done(function(recd) {
                $('#txtHint').html(recd);
            });
        }); //END mybutton click

    }); //END document.ready
</script>

我不知道您如何将图片作为 var 发送,或者如何构造它,但您已经了解了基本要点...

在服务器端,它是这样工作的(例如使用 PHP):

<?php
    $image = $_POST['img'];

    //Do something with the received image

实际上,现在我正在考虑,您发送的是图像(我以前没有做过),所以我认为您不能像发送文本或 JSON 对象那样发送它...您可能需要使用 enctype='multipart/form-data 属性来上传文件,就像您在使用表单上传时所做的那样?只是猜测。

无论如何,这并不是为了回答您的问题,只是为了给您一些提示,让您进一步了解。


请参阅这些关于 AJAX 基础知识的简单示例:

A simple example

More complicated example

Populate dropdown 2 based on selection in dropdown 1

关于javascript - 将数据从浏览器发送到服务器并返回,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19014257/

相关文章:

javascript - 父窗口关闭时如何从子窗口访问父窗口方法?

javascript - 如何使用 javascript 将任何手机号码包装到 anchor 标记中

javascript - 使用javascript在网页中查找和替换

javascript - css 3 透明边框

c# - 具有 XAML 中定义的选项的数据绑定(bind) WPF ComboBox?

javascript - 使用 Knockout.js 的单选按钮列表

WPF 工具提示绑定(bind)

javascript - 使用jquery从数组中删除特定值之后的所有值

html - CSS - 波浪边框

javascript - Canvas : drawImage method fails without error