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

Question

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

javascripthtmldata-bindingclient-serverrestful-architecture

4

我是一名C++开发人员，已经很长时间没有关注与Web相关的开发了。我有一个项目想要实现，目的是为了赶上这些技术。我的项目是这样的：

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

我相信我可以用一些简单的东西填补空白，比如WebGL、canvas和HTML5。我熟悉其中一些技术，也能学习。但我完全不知道需要使用或需要什么技术来完成诸如将数据发送到服务器、在服务器上处理数据并将某些结果发送回客户端等任务。我当然已经在网上做了一些调查，但是有太多的内容，真的很难知道该朝哪个方向去。有许多库、API、技术片段等等。

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

我读到了RESTFul，但我仍然不确定这是否是我需要的。如果有人能够简单地描述我需要这个项目的基本技术组件，指引我文档、教程、示例的方向，给我应该阅读的技术片段的名称，那将不胜感激。

我意识到这个问题的范围非常大（我应该在之前做好功课，而不是现在需要追赶多年的知识）。我相信这个问题对许多人来说都很有趣。我也承诺，当我找到并掌握一个工作的例子时，我会发布我的发现，甚至可以发布我的工作示例。

谢谢。

- user18490

1

听起来很像AJAX。你能够融入jQuery吗？那是使用ajax最简单的方式...否则，就用javascript吧。 - cssyphus

@gibberish，建议使用AJAX和jQuery。是否有基本示例展示这些库的功能？我的意思不是如何使用这些库，而是它们构建的基本原理。理想情况下，我希望自己编写函数来发送/接收/处理服务器数据，即使它很简单，在使用更强大的API之前，这些API可以更好、更快地完成相同的工作。 - user18490

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cssyphus · Accepted Answer

不是答案，只是一些包含代码的建议/想法。这是一个有结构/格式的注释。

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

要点是：

加载jQuery库。 一种方法是：

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

使用JavaScript代码块来执行您的jQuery脚本：

<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>

我不知道如何将图片作为变量发送，或者如何构造它，但你可以了解基本的意思...

在服务器端，它的工作方式如下（以PHP为例）：

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

    //Do something with the received image

其实，现在我想一想，您正在发送一张图片（这是我以前没有做过的），所以我认为您不能像发送文本或JSON对象那样发送它...您可能需要使用enctype='multipart/form-data'属性进行文件上传，就像使用表单进行上传时一样？只是猜测。

无论如何，这不是为了回答您的问题，只是给您一些提示，让您知道应该去哪里寻找更多信息。

请参考以下简单示例，了解AJAX的基础知识：

一个简单的例子

更复杂的例子

根据下拉列表1中的选择填充下拉列表2