Javascript: Ajax ile JSON nesnesi gönderilsin mi?


151

Mümkün mü?

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

Belki de: başlıklı content type: application/json?:

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

Aksi takdirde kullanabilirsiniz:

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

ve sonra JSON.stringifyJSON nesnesini bir parametreye göndeririz, ancak mümkünse bu şekilde göndermek güzel olur.

Yanıtlar:


330

JQuery ile:

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

JQuery olmadan:

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

2
ama adam ben content-type: application/x-www-form-urlencodedkullanabilirsiniz stringize kullanırsanız, o zaman kullanmak için ne anlamı var application/json? :)
Adam

4
@CIRK: Sorun nedir? Sunucuya özel olarak davranmadığı sürece içerik türü ayarı tamamen isteğe bağlıdır. Sadece günün sonunda ileri geri akan verilerdir.
mellamokb

17
posta gövdeniz JSON olması bekleniyorsa, örneğin ({name: "John", saat: "14:00"}), yazı gövgeniz urlencoded veri biçiminde ise (name = John & time = 14:00) içerik türü application / json kullanın / x-www-form-urlencoded
Nathan Romano

1
URL'yi nereye koymalıyım?
Aaron Liu

6
@ShuruiLiu bir URL "/json-handler", open()yöntemin 2. parametresi olarak yer alıyor
Alexandr Nil

36

JQuery kullanmıyorsanız, lütfen şunlardan emin olun:

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

Ve php alıcı sonu için:

 $_POST['json_name'] 

Doğrudan kullanamıyor musunuz?
rohitsakala

8
Bunun sorulan soruya cevap verdiğini sanmıyorum. Geliştiricinin PHP'ye bir BLON bloğunu Content-Type: application / json, urlencoded sarıcıya sarılmamış olarak göndermek istediğine inanıyorum.
Fordi

1
Bu gerçekten JSON göndermiyor, formdata gönderiyor. Ayrıca doğrudan JSON gönderebilirsiniz, bu durumda $ _POST ile okuyamazsınız, bunun yerine json_decode (file_get_contents ('php: // input')) ile okuyabilirsiniz;
David

Sevgili dostlar, bu POST ajax'ı sayfada kullanılacak tüm kodla paylaşabilir misiniz? Veya JSON ile vanilya ajax POST'un tam çalışan bir örneğine nazik bir bağlantınız varsa da teşekkür ederiz
Robert

1

Birkaç gün boyunca birden fazla kimlik dizisi geçirip bir damla döndürürken benim için işe yarayacak bir şey bulmak için mücadele ettim. .NET CORE kullanıyorsanız 2.1 kullanıyorum, [FromBody] kullanmanız gerekir ve yalnızca verileri tutmak için bir viewmodel oluşturmanız gerektiğinde kullanabilirsiniz.

Aşağıdaki gibi içeriği tamamlayın,

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

Benim durumumda zaten dizileri json'd ve sonucu işleve aktardım

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

Sonra XMLHttpRequest POST'u çağırın ve nesneyi dize edin

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

Sonra böyle bir model var

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

Sonra Eylem gibi geçmek

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

Bir dosya döndürüyorsanız bu eklentiyi kullanın

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

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.