Как установить тип контента как application / json, используя вызов Ajax? - PullRequest
0 голосов
/ 25 сентября 2018

Имеет smartcontract GovtContract, который отлично работает при использовании команд curl,

$curl -X POST -H "Content-Type: application/json" localhost:3000/govtcontract/set -d '{"value":"5"}' | jq

$curl -X GET -H "Content-Type: application/json" localhost:3000/govtcontract/get | jq

Однако при использовании формы не удается установить тип содержимого как JSON в заголовке запроса.

HTML и JS:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

function validateForm() {
    console.log("in validateForm");
    //var amt = document.forms["txForm"]["amtvalue"].value;
        var amt = document.getElementById("amtvalue").value;
        console.log(amt);
        if (isNaN(amt) || amt < 0) {
            alert("Amount is not valid");
            return false;
        }
        console.log("before ajax call");
        var sendValues = {
            value: amt
        }
         $.ajax({
             url: "/govtcontract/set",
             type: "POST",
             dataType:"json",
             data: JSON.stringify({
             value: amt
               }),
             contentType: "application/json",
             success: function(got) {
                  return console.log("shortened url: " + got);
                }
          });



    return true;
}
</script>
</head>
<body>
<h1>Enter the transaction details below:</h1>
<form name="txForm" action="http://127.0.0.1:3000/govtcontract/set" onsubmit="return validateForm()" method="post">
Enter the amount:<br>
<input type="number" name="amtvalue" id="amtvalue" value="0"/><br>

<input type="submit" value="Submit">
</form>
</body>
</html>

Сервер app.js:

const bodyParser = require('body-parser');
const express = require('express');
const GovtContractInstance = new (require('./GovtContract.js'))();
const app = express();

// Uses json as the format for reading request bodies
app.use(bodyParser.json());

// Allow CORS policy to allow anyone to call these endpoints
app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

// POST testing endpoint for echoing the body of post calls
// You can use this endpoint to ensure the format of your curl requests are correct
// ex: curl -X POST -H "Content-Type: application/json" localhost:3000/echo -d '{"copy": "cat"}'
app.post('/echo', (request, response) => {
    // Same as post call except used for /app endpoint for getting/initializing the backend data
    response.status(200).send(request.body);
});

// POST deploys the SimpleStorage.sol smart contract onto your network.
// ex: curl -X POST -H "Content-Type: application/json" localhost:3000/simplestorage/deploy
// Optionally, you can use a SimpleStorage contract that it already deployed by
// adding the deployed address to the end of the url
// ex. curl -X POST -H "Content-Type: application/json" localhost:3000/simplestorage/deploy/0xafcAfc6F48E23cEF78355A2f6D013310B84c6272
app.post('/govtcontract/deploy/:address?', (request, response) => {
    let address = request.params.address ? request.params.address : null;
    GovtContractInstance.deploy(address).then((deployedAddress) => {
        return response.status(200).send({contractAddress: deployedAddress});
    }).catch((error) => {
        console.log("Error in deploy: ", error);
        return response.status(400).send({errorMessage: JSON.stringify(error)});
    })
});

// POST Sets the value stored in the contact to the value set in the request body
// ex: curl -X POST -H "Content-Type: application/json"     localhost:3000/simplestorage/set -d '{"value": "5"}'
app.post('/govtcontract/set', (request, response) => {
    if (!request.body.value) {
        return response.status(400).send({errorMessage: "No value set in request body"});
    }
    GovtContractInstance.set(request.body.value).then((txReceipt) => {
        return response.status(200).send({receipt: txReceipt});
    }).catch((error) => {
        console.log(error);
        return response.status(400).send({errorMessage: JSON.stringify(error)});
    })
});

// GET Returns the value stored in the contract
// ex: curl -X GET -H "Content-Type: application/json" localhost:3000/simplestorage/get
app.get('/govtcontract/get', (request, response) => {
    GovtContractInstance.get().then((value) => {
    return response.status(200).send({storedValue: value});
    }).catch((error) => {
        console.log(error);
        return response.status(400).send({errorMessage: JSON.stringify(error)});
    })
});

// Listen on port 3000
app.listen(3000, () => {
    console.log('listening on port 3000');
});

Форма отправляется как application/x-www-form-urlencoded, как видно из заголовка запроса.Невозможно понять это.ТИА!

Ответы [ 2 ]

0 голосов
/ 25 сентября 2018

Добро пожаловать в переполнение стека.

В вашем вызове многократная проблема.Вы используете FORM submit и AJAX call также для той же цели.Используйте только один из них.Используя AJAX Call, вы сможете поддерживать Одностраничное приложение , поэтому мое решение будет сосредоточено только на этом.

Поскольку мы используем AJAX call, то нет необходимости в формеи сформируйте действие, так как об этом позаботятся AJAX url.

HTML и JS:

<html>
    <head>
    </head>
    <body>
        <h1>Enter the transaction details below:</h1>
        Enter the amount:<br>
        <input type="number" name="amtvalue" id="amtvalue" value="0"/><br>

        <p onClick="validateForm();">Submit</p>
    </body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        function validateForm() {
            console.log("in validateForm");

            var amt = document.getElementById("amtvalue").value;

            console.log(amt);
            if (isNaN(amt) || amt < 0) {
                alert("Amount is not valid");
                return false;
            }

            console.log("before ajax call");

            $.ajax({
                url: "/govtcontract/set",
                method: "POST",
                headers: {
                    'Content-Type': 'application/json'
                },
                data: {
                    value: amt
                },
                success: function(got) {
                    console.log("shortened url: " + got);
                }
            });
        }
    </script>
</html>

Также на сервере app.js добавьте следующие также для извлечения любых данных вreq.body

  // configure the app to use bodyParser() to extract body from request.
  // parse urlencoded types to JSON
  app.use(bodyParser.urlencoded({
  extended: true
  }));

  // parse various different custom JSON types as JSON
  app.use(bodyParser.json({ type: 'application/*+json' }));

  // parse some custom thing into a Buffer
  app.use(bodyParser.raw({ type: 'application/vnd.custom-type' }));

  // parse an HTML body into a string
  app.use(bodyParser.text({ type: 'text/html' }));

Руководство для начинающих по веб-приложениям, использующим NodeJS и HTML, посмотрите это хранилище , это иллюстрирует одностраничное приложение и разницу между многостраничной и одностраничной страницами.

0 голосов
/ 25 сентября 2018

Вы используете JSON.stringify(), которые возвращают строку.Вам просто нужно передать объект в свойство данных

{
  ...
  data: { value : amt },
  ...
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...