วิธีการส่งหลายเขตข้อมูลผ่าน 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 ของฉันคืออะไร


รูปแบบรองทั้งสองของการจัดการข้อมูลอินพุตนั้นถูกต้อง คุณเข้าถึงสิ่งนี้ในด้าน PHP ได้อย่างไร คุณอาจพิจารณา HTTP ดมกลิ่น (พู้ทำเล่นบนพีซีเช่น HTTPScoop บน Mac) ซึ่งจะแสดงให้คุณเห็นสิ่งที่เคลื่อนไหวข้ามสาย
John Green

ฉันขอแนะนำให้ใช้ firebug / chrome เพื่อดีบักข้อมูลโพสต์ของคุณ ตรวจสอบให้แน่ใจว่าคุณได้รับรหัส HTTP 200 และมีการโพสต์ข้อมูลในแบบฟอร์มที่คุณคิดว่าควรเป็น หากทุกอย่างดูถูกต้องกับข้อมูลการโพสต์ฉันจะเริ่มพยายามดีบักโค้ดฝั่งเซิร์ฟเวอร์ PHP ของคุณ
Kyle Rogers

การใช้ firebug ช่วยได้จริงๆลืมการตรวจสอบหน้าของฉันด้วย : /
deadconversations

การใช้ ** ด้านหน้าและตอนท้ายของ data param คืออะไร?
heinkasner

1
@ heinkasner ฉันคิดว่า ** อยู่ตรงนั้นเพื่อแสดงให้ผู้อ่านเห็นว่าผู้เขียนต้องการเน้นอะไร ** จะต้องถูกลบออกเมื่อรหัสพร้อมที่จะบันทึกไว้ในไฟล์!
ทำเครื่องหมาย

คำตอบ:


256

ไวยากรณ์ที่ถูกต้องคือ:

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

ตามที่ระบุไว้ที่นี่: http://api.jquery.com/jQuery.ajax/

ดังนั้นหากไม่ได้ผลฉันจะแจ้งเตือนตัวแปรเหล่านั้นเพื่อให้แน่ใจว่ามีค่า


4
เขาชี้ให้เห็นโดยเฉพาะในคำถาม: "ฉันได้ลองทุกสิ่ง: data: {status: status, name: name},"
Ry-

20
ฉันเพิ่งชี้ให้เห็นไวยากรณ์ที่ถูกต้องและบอกว่าปัญหาต้องเป็นอย่างอื่นไม่ใช่ไวยากรณ์
Avitus

3
ดูเหมือนว่าไวยากรณ์ของฉันถูกต้องฉันเชื่อว่าฉันทำผิด SQL โง่มาก
หยุดชะงักใน

2
Re: ไวยากรณ์โปรดทราบว่าชื่อคีย์คือ '-' เช่น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


วิธีนี้ใช้ได้ผลสำหรับฉันเมื่อพยายามที่จะส่งผ่านอาแจ็กซ์ การรวมเข้ากับสตริงเป็นวิธีแก้ปัญหา ขอบคุณ!
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>

นี่คือ jQuery ของฉันโดยใช้ AJAX:

$("#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: {สถานะ: สถานะ, ชื่อ: ชื่อ}" วิธีการประเภทข้อมูลจะต้องตั้งค่า 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

นี่คือสิ่งที่ใช้ได้ผลกับฉันหลังจากผ่านไป 2 วัน ทำไมฉันไม่สามารถตั้งค่า 'ข้อมูล' ของ AJaX เพื่อส่งคีย์ / ค่าสองค่า (รวมถึงตัวแปรที่มีข้อมูลภาพดิบ) เป็นเรื่องลึกลับ แต่ดูเหมือนจะเป็นสิ่งที่ฟังก์ชั่น jQuery.param ()เขียนขึ้นมา;

สร้างอาร์เรย์พารามิเตอร์ด้วยตัวแปรของคุณโดยไม่มีเครื่องหมายคำพูด:

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.