Форум

DiYanka · #1 (**permalink**) 01.12.2013, 01:21

Здравствуйте, участники форума!
Я здесь новичок, может быть кто-то уже задавал такой вопрос, если это так, то направьте меня почитать, пожалуйста, сама не нашла.
Я для своего сайта нашла вот такой код для подгрузки данных без перезагрузки страницы.

<script src="js/jquery v1.7.2.js" type="text/javascript"></script>	
  <script type="text/javascript">
  $(document).ready(function(){
     $("#buttonUpload").click(function(){
       $.ajax({
         url: "uploadContent.php",
         type: "GET",
         cache:true,
         data: {data:$("#textUpload").val()},
         success: function(data){   
           $("#dataUpload").html(data);
         }
       });
     });
  });
  </script>

<input type="text" id="textUpload" value="" />
  <button id="buttonUpload">Подгрузить</button>
  <br />
  <hr />
  <div id="dataUpload"></div>

<?php
header("Content-Type: text/html; charset=UTF-8");
if($_SERVER["HTTP_X_REQUESTED_WITH"] == "XMLHttpRequest") {
 print  " DATA: ".$_GET["data"]; 
}
?>

Но он забирает данные по id, а мне нужно будет забирать данные из нескольких форм.
Подскажите, как можно перенастроить код, чтобы он забирал данные по name = "" или по class т.к если забирать данные через id, то он забирает только из первой формы, а другие не видит.

рони · #2 (**permalink**) 01.12.2013, 03:03

DiYanka,
id уникально -- а по классу сделайте перебор всех элементов а для name есть serialize()

danik.js · #3 (**permalink**) 01.12.2013, 11:28

Если поля с одинаковым именем, и хотите передать их значения как массив, то тогда так:

var postFields = $('[name="blabla"]');
var postValues = $.map(fields, function(item){ return item.value });

$.ajax({data: {"data[]": postValues}, ...

В PHP придет массив значений.

Если поля с разными именами, то как уже сказал рони (ток он чего-то напутал), можно использовать serialize():

var postFields = $('.field');
var serializedFields = fields.serialize();
$.ajax({data: serializedFields, ..

Впрочем можно использовать serialize() и в первом случае (вместо $.map), но имена полей должны быть с квадратными скобками: blabla[]
(И наверно такой способ даже предпочтительней).

DiYanka · #4 (**permalink**) 01.12.2013, 21:25

Я переделала форму вот так:

<script type="text/javascript">
  $(document).ready(function(){
     $("#go").click(function(){
       $.ajax({
         url: "uploadContent.php",
         type: "GET",
         cache:true,
         data: {item1:$("#item1").val()},
         success: function(data){   
           $("#getItem1").html(data);
         }
       });
     });
  });
  $(document).ready(function(){
     $("#go").click(function(){
       $.ajax({
         url: "uploadContent.php",
         type: "GET",
         cache:true,
         data: {item2:$("#item2").val()},
         success: function(data){   
           $("#getItem2").html(data);
         }
       });
     });
  });
</script>

<form action="" method="get">
  <input type="text" id="item1" name="item1" value="1" />
  <input type="text" id="item2" name="item2" value="2" />
  <input type="submit" id="go" onClick="return false;" value="Отправить">
  </form>
  <form action="" method="get">
  <input type="text" id="item1" name="item1" value="3" />
  <input type="text" id="item2" name="item2" value="4" />
  <input type="submit" id="go" onClick="return false;" value="Отправить">
  </form>
  <form action="" method="get">
  ...
  </form>

<div id="getItem1"></div><div id="getItem2"></div>

У меня будет по несколько форм ввода на страничку. Я понимаю, что ID должен быть уникальным. Поэтому, хотела, чтобы эта форма работала, подгружая данные вместо id="item1" из name="item1".
Я попыталась сюда

$.ajax({
         url: "uploadContent.php",
         type: "GET",
         cache:true,
         data: {item2:$("#item2").val()},
         success: function(data){   
           $("#getItem2").html(data);
         }

данные из примера

var postFields = $('[name="blabla"]');
var postValues = $.map(fields, function(item){ return item.value });
$.ajax({data: {"data[]": postValues}, ...

Но у меня никак не хочет работать, не понимаю почему...
Мне нужно передавать данные именно методом get.

рони · #5 (**permalink**) 01.12.2013, 22:11

DiYanka,

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

</head>

<body>
<form action="" method="get">
 <input type="text" id="item1" name="item1" value="1" />
 <input type="text" id="item2" name="item2" value="2" />
 <input type="submit" id="go" onClick="return false;" value="Отправить">
 </form>
 <form action="" method="get">
 <input type="text" id="item1" name="item1" value="3" />
 <input type="text" id="item2" name="item2" value="4" />
 <input type="submit" id="go" onClick="return false;" value="Отправить">
 </form>
<script>
alert(JSON.stringify($('form').serializeArray()));
alert(JSON.stringify($('form').serialize()));
</script>
</body>

</html>

определитесь как различать данные
и Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Rise · #6 (**permalink**) 01.12.2013, 23:07

DiYanka,

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script src="jquery-1.10.2.min.js"></script>
	<script src="uploadContent.js"></script>
</head>
<body>
	<form class="uploadContent">
		<input type="text" name="item1" value="1" />
		<input type="text" name="item2" value="2" />
		<input type="submit" name="go" value="Отправить" />
	</form>
	<form class="uploadContent">
		<input type="text" name="item1" value="3" />
		<input type="text" name="item2" value="4" />
		<input type="submit" name="go" value="Отправить" />
	</form>
	<div id="getItem1"></div>
	<div id="getItem2"></div>
</body>
</html>

uploadContent.js

$(document).ready(function() {
	$('form.uploadContent').submit(function() {
		$.ajax({
			type: 'GET',
			url: 'uploadContent.php',
			dataType: 'json',
			data: $(this).serialize(),
			success: function(data) {
				$('#getItem1').html(data.item1);
				$('#getItem2').html(data.item2);
				// $('#getItem1').append(data.item1);
				// $('#getItem2').append(data.item2);
			}
		});
		return false;
	});
});

uploadContent.php

<?php 
if ( isset($_GET['item1'], $_GET['item2']) ) {
	$items['item1'] = 'This is from item1: ' . $_GET['item1'];
	$items['item2'] = 'This is from item2: ' . $_GET['item2'];
	echo json_encode($items);
}
?>

DiYanka · #7 (**permalink**) 02.12.2013, 00:50

Спасибо большое за помощь!!! Вы мне очень помогли.

Rise, Вам отдельное спасибо!

К сожалению, не всегда получается сразу понять, что написано в мануалах, не знаю, что бы без вас делала!

Форум

Справочник

Discord чат

Курсы javascript