Изменение действия HTML-формы с помощью jQuery / Javascript

ProgramBox

Изменение действия HTML-формы с помощью jQuery / Javascript

Post author:admin
Запись опубликована:13 февраля, 2023
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

Я пытаюсь создать форму post в HTML, используя экспресс-маршрут RESTful, что-то похожее на /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/ обновление.

Это запрос post, и я хотел бы, чтобы в форме содержались другие данные, чтобы указать свойство для обновления, а также новое значение.

Как я могу это сделать, или я думаю об этом неправильно?

Редактировать:

Изменен заголовок вопроса, чтобы быть более полезным.

Ответ №1:

Попробуйте

 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});
});

Извините, я неправильно понял ваш вопрос. Я думал, у вас возникли трудности с анализом параметров узла в node.

В любом случае, есть разные способы добиться этого. Конечно, вам нужна поддержка 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>

Ответ №2:

Способ передачи данных в 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. Я знаю, как создать форму, а затем получить данные из запроса в Express, но конкретно я говорил о том, как создать HTML-форму и сделать это с помощью функции:<parameter> , где URL-адрес в app.get содержит идентификатор ресурса, который вы используете.пытаюсь получить. Пример: вы можете использовать app.get(«/game/:GameID/download ….) в express, а затем написать обработчик запроса для загрузки игры. Затем вручную переход к URL /game/2/download вызовет ваш код обработчика. Но я не понимаю, как это сделать при создании HTTP-формы — это не так просто.

2. HTML-форма хочет поместить данные в тело запроса, как показано в примере выше. Я не знаю хорошего способа сформировать URL-адрес из содержимого формы, как вы пытаетесь сделать, не используя javascript для извлечения значений, формирования URL-адреса и вызова. Что мотивирует необходимость помещать данные в URL?

3. Ну, я пытаюсь сделать его похожим на REST, где вы получаете доступ к ресурсам, а не просто «вызываете функцию», что было бы достаточно просто, и именно так я это делал изначально. Я просто подумал, что, поскольку express использует нотацию:<parameter> для разрешения доступа к ресурсу в URL, должен быть способ интегрировать это с HTML-формой.

4. Если предполагается, что оно что-то возвращает пользователю, то вы можете использовать действие GET со строкой запроса (например, «url?parameter1= abcamp;parameter2= xyz»), которое вы извлекаете с помощью запроса. query.parameter1 и т.д. Вы можете просто перевернуть приведенный выше пример формы из POST в GET, и он заполнит URL-адрес /game/update?GameID=xyzamp;nodeRow=123amp;nodeCol=456, который можно извлечь с помощью запроса. запрос.NodeID и т.д.

5. Правильно… Я все это понимаю. Но я не говорю об использовании только запросов get и post. Вы можете использовать функциональность :<parameter>, например app.get(«/game/:GameID/download»), затем написать обработчик запроса для получения параметра GameID (request.params.GameID) и извлечь параметр GameID из URL, который вы вводите, напримеркак /game/245/загрузить. Но то, что я пытаюсь сделать, это выяснить, как использовать эту функциональность в форме HTML… вы не можете (насколько мне известно) выполнить <form method=»/game/:GameID/download»</form> .