Javascript: Enviar Objeto JSON com Ajax?

151

Isso é possível?

xmlHttp.send({
    "test" : "1",
    "test2" : "2",
});

Talvez com: um cabeçalho com content type: application/json?:

xmlHttp.setRequestHeader('Content-Type', 'application/json')

Caso contrário, eu posso usar:

xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

e, em seguida, JSON.stringifyo objeto JSON e envie-o em um parâmetro, mas seria legal enviá-lo dessa maneira, se possível.

javascript ajax json header request Adão
fonte

330

Com o jQuery:

$.post("test.php", { json_string:JSON.stringify({name:"John", time:"2pm"}) });

Sem jQuery:

var xmlhttp = new XMLHttpRequest();   // new HttpRequest instance 
xmlhttp.open("POST", "/json-handler");
xmlhttp.setRequestHeader("Content-Type", "application/json");
xmlhttp.send(JSON.stringify({name:"John Rambo", time:"2pm"}));

Nathan Romano
fonte

2

mas cara, eu posso usar o tipo de conteúdo: application/x-www-form-urlencodedtambém se eu usar o stringify, então qual é o sentido de usar application/json? :)

Adam

4

@CIRK: Qual é o problema? A configuração do tipo de conteúdo é completamente arbitrária, a menos que o servidor trate um ou outro especialmente. São apenas dados fluindo para frente e para trás no final do dia.

precisa saber é o seguinte

17

bem, se o corpo da postagem deve ser JSON, por exemplo ({name: "John", horário: "14:00"}), use o tipo de conteúdo application / json, se o corpo da postagem tiver dados codificados em url (name = John & time = 14:00) use application / Você pode usar o seguinte código

Nathan Romano

1

onde devo colocar o URL?

Aaron Liu

6

@ShuruiLiu um URL substitui o "/json-handler"segundo parâmetro do open()método #

Alexandr Nil

36

Se você não estiver usando o jQuery, verifique se:

var json_upload = "json_name=" + JSON.stringify({name:"John Rambo", time:"2pm"});
var xmlhttp = new XMLHttpRequest();   // new HttpRequest instance 
xmlhttp.open("POST", "/file.php");
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.send(json_upload);

E para o php recebendo final:

 $_POST['json_name']

shantanu chandra
fonte

Não pode usá-lo diretamente?

rohitsakala

8

Acho que isso não responde à pergunta. Acredito que o desenvolvedor queira enviar um blob de JSON para PHP como Content-Type: application / json, não envolto em um invólucro com código de URL.

Fordi

1

Na verdade, isso não está enviando JSON, está enviando dados de formulário. Você também pode enviar JSON diretamente, caso em que não pode lê-lo com $ _POST, mas lê-lo com json_decode (file_get_contents ('php: // input'));

David

Caros amigos, você pode compartilhar esse POST ajax com todo o código necessário para ser usado na página? Ou obrigado, bem como se você tem um link tipo a algum exemplo de trabalho cheia de baunilha ajax POST com JSON

Robert

1

Eu lutei por alguns dias para encontrar algo que funcionasse para mim, como passar várias matrizes de IDs e retornar um blob. Acontece que, se estiver usando o .NET CORE, eu estou usando o 2.1, você precisa usar [FromBody] e como só pode ser usado depois que você precisar criar um viewmodel para armazenar os dados.

Embrulhe o conteúdo como abaixo,

var params = {
            "IDs": IDs,
            "ID2s": IDs2,
            "id": 1
        };

No meu caso, eu já tinha json'd as matrizes e passado o resultado para a função

var IDs = JsonConvert.SerializeObject(Model.Select(s => s.ID).ToArray());

Em seguida, chame o XMLHttpRequest POST e especifique o objeto

var ajax = new XMLHttpRequest();
ajax.open("POST", '@Url.Action("MyAction", "MyController")', true);
ajax.responseType = "blob";
ajax.setRequestHeader("Content-Type", "application/json;charset=UTF-8");           
ajax.onreadystatechange = function () {
    if (this.readyState == 4) {
       var blob = new Blob([this.response], { type: "application/octet-stream" });
       saveAs(blob, "filename.zip");
    }
};

ajax.send(JSON.stringify(params));

Então tenha um modelo como este

public class MyModel
{
    public int[] IDs { get; set; }
    public int[] ID2s { get; set; }
    public int id { get; set; }
}

Depois passe em Ação como

public async Task<IActionResult> MyAction([FromBody] MyModel model)

Use este complemento se você estiver retornando um arquivo

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>

Dave
fonte

0

Adicionando Json.stringfyo json que corrigiu o problema

user3310115
fonte

Javascript: Enviar Objeto JSON com Ajax?

Respostas: