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.