Ajax를 통해 여러 데이터 필드를 보내는 방법은 무엇입니까? [닫은]


136

문제가 있습니다. AJAX를 사용하여 양식을 제출하려고하는데 AJAX 호출을 통해 여러 데이터 필드를 보내는 방법을 찾을 수 없습니다.

$(document).ready(function() {
  $("#btnSubmit").click(function()  {
    var status = $("#activitymessage").val();
    var name = "Ronny";
    $.ajax({
      type: "POST",
      url: "ajax/activity_save.php",
      **data: "status="+status+"name="+name"**,
      success: function(msg) {...

나는 모든 종류의 것들을 시도했다.

data: {status: status, name: name},

또는 테스트 목적으로 다음과 같은 것들도 있습니다.

data: "status=testing&name=ronny",

그러나 내가 시도하는 모든 것은 activity_save.php내 SQL에 아무것도 얻지 못합니다 .

그렇다면 AJAX 호출에 더 많은 데이터 줄을 넣는 올바른 구문은 무엇입니까?


입력 데이터를 처리하는 2 차 형식은 모두 유효합니다. PHP 측에서 어떻게 액세스합니까? HTTP 스니퍼 (PC의 Fiddler, Mac의 HTTPScoop과 같은 것)를 고려할 수 있습니다.
John Green

Firebug / chrome을 사용하여 게시물 데이터를 디버깅하는 것이 좋습니다. HTTP 코드 200을 받고 양식 데이터가 생각에 게시되어 있는지 확인하십시오. 포스트 데이터로 모든 것이 올바르게 보이면 PHP 서버 사이드 코드를 디버깅하려고 시도합니다.
Kyle Rogers

방화범을 사용하면 실제로 내 페이지를 확인하는 것을 잊어 버렸습니다. : /
deadconversations

데이터 매개 변수 앞뒤에 **를 사용하는 것은 무엇입니까?
heinkasner

1
@ heinkasner, 나는 저자가 강조하고 싶은 줄을 독자에게 보여주기 위해 **가 있다고 생각합니다. 코드를 파일에 저장할 준비가되면 **를 제거해야합니다!
Mark

답변:


256

올바른 구문은 다음과 같습니다.

data: {status: status, name: name},

여기에 지정된대로 : http://api.jquery.com/jQuery.ajax/

그래도 작동하지 않으면 해당 변수에 값이 있는지 확인하도록 경고합니다.


4
그는“나는 모든 종류의 것을 시도했습니다 : data: {status: status, name: name},
Ry-

20
방금 올바른 구문을 지적하고 문제가 구문이 아닌 다른 것이어야한다고 말하고있었습니다
Avitus

3
내 구문이 올바른 것 같습니다. 매우 바보 같은 SQL 실수를했다고 생각합니다.
deadconversations

2
다시 : 구문, 키 이름은 '-'입니다. 예를 들어 data: { site-name: "StackOverflow" }작동하지 않습니다.
moey

로부터 문서 "데이터 옵션은 형식의 쿼리 문자열 중 하나를 포함 할 수 있습니다 key1=value1&key2=value2, 또는 형태의 객체를 {key1: 'value1', key2: 'value2'}. 후자의 형태를 사용하는 경우, 데이터가 전송되기 전에 jQuery.param ()를 사용하여 쿼리 문자열로 변환됩니다. "
Jay Blanchard

32

JSON 또는 일반 POST를 통해 데이터를 보낼 수 있습니다 (JSON의 예).

 var value1 = 1;
 var value2 = 2;
 var value3 = 3;   
 $.ajax({
      type: "POST",
      contentType: "application/json; charset=utf-8",
      url: "yoururlhere",
      data: { data1: value1, data2: value2, data3: value3 },
      success: function (result) {
           // do something here
      }
 });

일반 게시물을 통해 사용하려면 이것을 시도하십시오

 $.ajax({
      type: "POST",
      url: $('form').attr("action"),   
      data: $('#form0').serialize(),
      success: function (result) {
         // do something here
      }
 });

.serialize()정의되지 않았습니다!
Amirhossein Mehrvarzi


6
var countries = new Array();
countries[0] = 'ga';
countries[1] = 'cd';

그 후에는 다음과 같이 할 수 있습니다.

var new_countries = countries.join(',')

후:

$.ajax({
    type: "POST",
    url: "Concessions.aspx/GetConcessions",
    data: new_countries,
    ...

이것은 JSON 문자열 형식으로 작동합니다.


이 솔루션은 ajax를 통해 배열을 전달하려고 할 때 효과적이었습니다. 그것을 문자열로 결합하는 것이 해결책이었습니다. 감사!
Brian Powell


3

이것은 나를 위해 작동합니다.

내 PHP는 다음과 같습니다.

<div id="pageContent">
  <?php
    while($row = mysqli_fetch_assoc($stmt)) {
  ?>
  <br/>
  <input id="vendorName_" name="vendorName_<?php echo $row["id"]; ?>" value='<?php echo $row["vendorName"]; ?>'>
  <input id="owner_" name="owner_<?php echo $row["id"]; ?>" value='<?php echo $row["owner"]; ?>'>
  <input id="city_" name="city_<?php echo $row["id"]; ?>" value='<?php echo $row["city"]; ?>'>
  <button id="btn_update_<?php echo $row["id"]; ?>">Update</button>
  <button id="btn_delete_<?php echo $row["id"]; ?>">Delete</button>
  <?php
    }
  ?>
  </br></br>
  <input id = "vendorName_new" value="">
  <input id = "owner_new" value="">
  <input id = "city_new" value="">
  <button id = "addNewVendor" type="submit">+ New Vendor</button>
</div>

다음은 AJAX를 사용하는 jQuery입니다.

$("#addNewVendor").click(function() {
  alert();
  $.ajax({
    type: "POST",
    url: "create.php",
    data: {vendorName: $("#vendorName_new").val(), owner: $("#owner_new").val(), city: $("#city_new").val()},
    success: function(){
      $(this).hide();
      $('div.success').fadeIn();
      showUsers()
    }
  });
});

2

나는 ajax의 초보자이지만이 "data : {status : status, name : name}"메소드 데이터 유형을 JSON으로 설정해야한다고 생각합니다.

$.ajax({
type: "POST",
dataType: "json",
url: "ajax/activity_save.php",
data: {status: status, name: name},

3
스택 오버플로에 오신 것을 환영합니다. 보내는 내용이 아니라 서버dataType 에서 얻을 것으로 예상되는 내용 유형 응답 입니다. 보내는 데이터는 항상 로 변환됩니다 . foo=bar&bar=foo
h2ooooooo

1

이것을 사용하십시오

data: '{"username":"' + username + '"}',

나는 laravel로 작업하기 위해 많은 문법을 시도합니다 .laravel 4.2 + ajax에서 작동합니다.


1

이 시도:

$(document).ready(function() {
  $("#btnSubmit").click(function() {
    var status = $("#activitymessage").val();
    var name = "Ronny";
    $.ajax({
      type: "POST",
      url: "ajax/activity_save.php",
      data: {'status': status, 'name': name},
        success: function(msg) {...

1

나는 AJAX를 처음 사용하고 이것을 시도했으며 잘 작동합니다.

function q1mrks(country,m) {
  // alert("hellow");
  if (country.length==0) {
    //alert("hellow");
    document.getElementById("q1mrks").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("q1mrks").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","../location/cal_marks.php?q1mrks="+country+"&marks="+m,true);
  //mygetrequest.open("GET", "basicform.php?name="+namevalue+"&age="+agevalue, true)
  xmlhttp.send();
}

1

사용하십시오 :

$.ajax({
    type: "GET",
    url: "something.php",
    data: { "b": data1, "c": data2 },   
    dataType: "html",
    beforeSend: function() {},
    error: function() {
        alert("Error");
    },
    success: function(data) {                                                    
        $("#result").empty();
        $("#result").append(data);
    }
});

1
아마도 몇 가지 설명?
cs95

0

이틀간의 머리 긁기 후에 저에게 효과적인 것은 다음과 같습니다. 왜 두 개의 키 / 값 (원시 이미지 데이터를 포함하는 변수 포함)을 전송하기 위해 AJaX 'data'설정을 얻을 수 없었는지는 미스터리이지만 jQuery.param () 함수는 가 작성된 .

따옴표없이 변수로 params 배열을 만듭니다.

var params = { key_name1: var_1, key_name2: var_2  }; // etc.

var ser_data = jQuery.param( params );   // arbitrary variable name

변수 ser_data를 데이터 값으로 사용하십시오.

      $.ajax({
       type: 'POST',
       url: '../php_handler_url.php',
       data: ser_data,
    }).success(function(response) {
       alert(response);
    });

설명서는 다음과 같습니다. https://api.jquery.com/jQuery.param/

희망이 도움이됩니다!

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.