jQuery 发布 JSON

Question

更新：我想将

var value

传递到服务器

你好， 老样子，老样子……:)

我有一个名为

<form id="testForm" action="javascript:test()">

的表单和一个名为

<code id="testArea"></code>

的代码区域

我正在使用此代码来字符串化并显示代码区域中的数据：

var formData = form2object('testForm');
document.getElementById('testArea').innerHTML = JSON.stringify(formData, null, '\t');
var value = JSON.stringify(formData, null, '\t');

我想要的是将这些数据发送到 JSON 文件。 我一直在研究这个项目：http://ridegrab.com/profile_old/，如果您按

Submit Query

按钮，您将看到页面的头部填充。

我也想用这段脚本来发送数据：

    function authenticate(userName, password) {
    $.ajax
    ({
        type: "POST",
        //the url where you want to sent the userName and password to
        url: 'username:password@link to the server/update',
        dataType: 'json',
        async: false,
        //json object to sent to the authentication url
        data: '{"userName": "' + userName + '", "password" : "' + password + '"}',
        success: function () {

        alert("Thanks!"); 
        }
    })
}

同样，我想要的只是能够将 JSON 数据发送到服务器。我的服务器已设置为

update or POST

数据位于正确的位置。

Answer 1

你像这样发布 JSON

$.ajax(url, {
    data : JSON.stringify(myJSObject),
    contentType : 'application/json',
    type : 'POST',
    ...

如果您将对象作为 settings.data 传递，jQuery 会将其转换为查询参数，并默认使用数据类型 application/x-www-form-urlencoded 发送； charset=UTF-8，可能不是你想要的

Answer 2

“data”应该是字符串化的 JavaScript 对象：

data: JSON.stringify({ "userName": userName, "password" : password })

要发送您的

formData

，请将其传递给

stringify

：

data: JSON.stringify(formData)

某些服务器还需要

application/json

内容类型标头：

contentType: 'application/json'

这里还有类似问题的更详细答案：Jquery Ajax Posting JSON to webservice

Answer 3

如果您要将此帖子请求发送到跨域，您应该查看此链接。

https://stackoverflow.com/a/1320708/969984

您的服务器不接受跨站发布请求。因此需要更改服务器配置以允许跨站点请求。

Answer 4

使用事件发布异步函数。

//------------Global variable for async event communication 
 var gArray = [];
 gArray.length=10;  
            
 //------------funtions for Post 
 function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
 }
            
 async function gWait(pIndex=0, pTimeoutSec=10, pEventTag="html", pEventName="PostEvent" ) {  // async, generate event 
   var i=0;
   //console.log('gWait start');
   while (i < 50*pTimeoutSec && gArray[pIndex]==null) {
      await sleep(20);
      i++;
   }
   if (i>=50*TimeoutSec)  {
     gArray[pIndex]='{"error":"WEB error. Timeout '+pTimeoutSec+' sec."}';
   }
   //console.log('gWait stop, iteration:'+i);
   $(pEventTag).trigger(pEventName,pIndex); //generate event
              // use: $("html").on("PostEvent", function(event,msg){ console.log(event.type+' data:'+gArray[msg]); });
 }
            
 function Post(pJSON="", pIndex=0, pTimeoutSec=10, pEventTag="html", pEventName="PostEvent") { //send JSON and return response to gArray[pIndex]
      if (pIndex>=gArray.length && pIndex<0) { 
          console.log('Error Post, pIndex invalid parameter');  
          return;
      }
      var js=pJSON;
      if (js=="") { js="{}"; }  
      gArray[pIndex]=null;
      try {
                fetch("ajax",   //url to server ex. "http://localhost:8081/api/services/tags/"
                {   method: "POST",
                    headers: {"Content-Type": "application/json; charset=utf-8" },
                    body: js
                    }).then(function (response) {
                    return response.json();
                    }).then(function (result) {
                        //console.log(result);
                        gArray[pIndex]=JSON.stringify(result);
                    });
                }
        catch (error) {
          gArray[pIndex] ='{"error":"WEB error. '+error.message+'"}';
        }  
        gWait(pIndex,pTimeoutSec,pEventTag,pEventName); //timeout controll, and generate event, async use
 }
    
 //---------Event handle ------------------         
 $(document).ready(function () {
        $("html").on("PostEvent", function(event,msg){
              console.log(event.type+' gArray['+msg+']:'+gArray[msg]);
        });
 });