将数据从浏览器发送到服务器并返回答案

【问题标题】：Sending data from a browser to a server and back将数据从浏览器发送到服务器并返回
【发布时间】：2013-10-01 14:18:39
【问题描述】：

我是 C++ 开发人员，很长时间以来我都没有真正跟进任何与 Web 相关的开发。我有一个我想实施的项目，实际上是为了赶上这些技术。我的项目是这样的：

在浏览器中显示一些内容（例如使用画布和 WebGL 的 3D 场景的内容），在页面上有一个按钮。当点击按钮时，将数据发送到服务器（例如相机位置），在服务器上渲染图像（使用一些离线的高质量渲染方案），将图像返回给浏览器，最后显示在画布中。

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

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

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

我意识到这个问题的范围非常大（而且我之前应该完成我的家庭作业，而不是现在有多年的知识可以赶上）。我相信尽管这个问题可能会引起许多人的极大兴趣。而且我还保证我会发布我的发现以及为什么不发布我的工作示例，当我想通了并且正在工作时。

谢谢。

【问题讨论】：

这听起来很像 AJAX。你能合并jQuery吗？这是使用 ajax 最简单的方法......否则，使用 javascript。
@gibberish，所以建议使用 AJAX 和 jQuery。是否有任何基本示例可以显示这些库的作用。我的意思是我不是在谈论如何使用这些库，而是在谈论构建它们的基本原则。理想情况下是的，我想自己编写函数来发送/接收/与服务器一起工作，即使它是初级的，在我使用更强大的 API 做同样的事情但更好、更快等之前。

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

【解决方案1】：

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

不确定如何在 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

【讨论】：

这已经非常有用了。非常感谢（鞠躬）。与此同时，我开始阅读有关 AJAX 的更多信息。从你所说的来看，似乎很难避免这些位。我会尝试一下。除了发送图像数据（一旦我已经有了处理文本的基本框架，我就会弄清楚），你可以通过这种方式传输多少数据。当然，您的带宽有限，但我的问题是“这些协议是否能够处理大量数据？”还是真的更多关于“您处理的最大值是关于一页文本”？再次感谢您。