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のようなもの)を検討することもできます。
ジョングリーン

firebug / chromeを使用して投稿データをデバッグすることをお勧めします。HTTPコード200を取得していることと、フォームデータが想定どおりに投稿されていることを確認してください。投稿データがすべて正しければ、PHPサーバー側のコードのデバッグを開始します。
カイル・ロジャース、

firebugを使用することは本当に役に立ち、私のページを確認することを完全に忘れていました。:/
11

データパラメータの前と終わりでの**の使用は何ですか?
heinkasner 2014

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の間違いを犯したと思います。
11

2
Re:構文。キー名が「-」であることに注意してくださいdata: { site-name: "StackOverflow" }。たとえば、機能しません。
moey、2011

docs から「dataオプションには、フォームのクエリ文字列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 14年


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 2013

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 2017年

0

2日間のひっかき傷がついた後、これが私にとってうまくいきます。AJaXの「データ」設定を取得して2つのキー/値(生の画像データを含む変数を含む)を送信できなかった理由は謎でしたが、それが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.