Question

在我看来，我有一个文本框。使用jquery，我获取了用户输入的值。现在，我想将我的jquery文件中的值发送到app.js中的express模块。

思想？

Answer 1

Ajax到你的服务器并发布一些数据...大致是这样的：

客户js

$.ajax({
  url: '/some/path'
  type: 'POST',
  data: {text: $(textbox).val()}
}).done(function() {
  //  Do stuff after data is posted here
});

快速

app.post('/some/path', function(request, response) {
  // Do stuff with request.params.text 
});

Answer 2

因为您在客户端上使用jQuery，所以使用jQuery来发布数据：

jquery $.post post data

因为您在服务器上使用Express，所以可以使用Express来检索POST数据：

How to retrieve POST query parameters?

Answer 3

<强>的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax with JQuery Demo</title>
    <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script>
        function getAndRenderData () {
            $.ajax({
                url: document.URL+"customers/",
                    // the URL for the request
                type: "GET",
                    // whether this is a POST or GET request
                dataType: "json",
                    // the type of data we expect back
                success: function (responseJson) {
                    // code to run if the request succeeds; parameter = response
                    var trHTML = '';
                    $.each(responseJson, function (i, customer) {
                        trHTML += '<tr><td>' + customer.firstName + '</td><td>' + customer.lastName + '</td></tr>';
                    });
                    $('#customers_table').append(trHTML);
                },
                error: function (xhr, status) {
                    // code run if request fails; raw request and status
                    console.log("Sorry, there was a problem!");
                },
                complete: function (xhr, status) {      // code to run regardless of success or failure
                    console.log("The request is complete!");
                }
            })
        }

        (function($) { $(function() {
            $('#button1').click(getAndRenderData);
        });
        })(jQuery);

    </script>
</head>
<body>
<h1>Ajax with JQuery Demo1</h1>
<p>
<button id='button1'>Click to show retrieved customer data</button>
</p>
<table id="customers_table" border='1'>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
    </tr>
</table>

</body>
</html>

<强> server.js

var express = require('express');
var app = express();

var customers = [
    {firstName:'Peter', lastName: 'Pan', age:13},
    {firstName:'Captain', lastName:'Hook', age:35}
];

app.get('/customers/', function(req, res) {
    res.type('text/plain');
    res.json(customers);
});

app.use('/', express.static(__dirname + '/public/'));

app.listen(3000);

如何将用户输入的数据从视图传递到ExpressJS，以便我可以使用它通过端点调用API？

3 个答案: