使用jQuery / Javascript修改HTML表单操作

时间:2014-06-18 02:27:05

标签: javascript html

我正在尝试使用RESTful express路由在HTML中创建一个帖子表单,类似于/ game /:gameID / node /:nodeRow /:nodeCol / update来更新给定游戏中的给定节点。

这是路线代码:

app.post("/game/:gameID/node/:nodeRow/:nodeCol/update", function(request, response) {
    gameHandler.updateNode(request, response)
});

我在HTML中这样做的原因是因为我还没有在实际的客户端(手机游戏)中创建功能,所以我需要一些东西来测试它。但是,我还没弄清楚如何制作HTML表单,以便我可以在表单中输入数据来替换:gameID,:nodeRow和:nodeCol,而不必手动转到URL,例如/ game / 3 / node / 2/5 /更新。

这是一个帖子请求,我希望表单中包含其他数据,以指定要更新的属性以及新值。

我怎么能这样做,或者我在想错了?

修改

将问题标题更改为更有用。

2 个答案:

答案 0 :(得分:0)

在POST请求中传递数据的方法是从html表单控件中推送数据,并从请求正文中检索值。下面的HTML定义了一个包含变量的表单,您可以从浏览器手动输入:

<html><body>
<form method="post" action="/game/update" role="form">
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">gameID</span>
                <input type="text" class="form-control" name="gameID" placeholder="<gameID>" value="123456">
                </div>
            </div>
            <div class="input-group">
                <span class="input-group-addon">nodeRow</span>
                <input type="text" class="form-control" name="nodeRow" placeholder="<nodeRow>" value="1">
                </div>
            </div>
            <div class="input-group">
                <span class="input-group-addon">nodeCol</span>
                <input type="text" class="form-control" name="nodeCol" placeholder="<gameID" value="1">
                </div>
            </div>
            <hr>
            <button type="submit" class="btn btn-default">Submit</button>
</form>
</body></html>

然后你可以按照下面的内容编写一个处理程序。单击“提交”将关闭POST请求,并将变量拉出请求正文,如下所示。

app.post("/game/update", function(request, response) {
    updateNodeHandler(request, response)
});

function updateNodeHandler(request, response) {
    var nodeID = request.body.nodeID;
    var nodeRow = request.body.nodeRow;
    var nodeCol = request.body.nodeCol;
    // Additional logic goes here...
}

答案 1 :(得分:0)

尝试

app.post("/game/:gameID/node/:nodeRow/:nodeCol/update", function(request, response) {
    console.log({gameID: request.params.gameID, nodeRow: request.params.nodeRow,nodeCol: request.params.nodeCol, body: request.body});
    response.send({gameID: request.params.gameID, nodeRow: request.params.nodeRow,nodeCol: request.params.nodeCol, body: request.body});
});

<小时/> 对不起,我误解了你的问题。我认为你在节点中解析节点参数时遇到了困难。

无论如何,有不同的方法可以实现这一目标。当然,您需要支持javascript,无论是纯javascript还是jQuery

这是一个例子

<form id="myform">
   <input name="gameID" id="gameID" />
   <input name="nodeRow" id="nodeRow" />
   <input name="nodeCol" id="nodeCol" />  
   <button name="action" value="bar" onclick="submitForm();">Go</button>
</form>

和javascript(使用jQuery)将是

<javascript>
  function submitForm(){
     $("#myform").attr('action',
         '/game/' + $("#gameID").val() + '/node/' + $("#nodeRow").val()
          + '/' + $("nodeCol").val() + '/update');

     $("#myform").submit();
  }
</javascript>