ajax request met jQuery
Ik heb het volgende:
filter.html
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form id="filter">
<input type="checkbox" value="1" name="waarde_1"> Waarde_1 1
<input type="checkbox" value="2" name="waarde_1"> Waarde_1 2
<input type="checkbox" value="3" name="waarde_1"> Waarde_1 3
<input type="checkbox" value="4" name="waarde_1"> Waarde_1 4
<input type="checkbox" value="1" name="waarde_2"> Waarde_2 1
<input type="checkbox" value="2" name="waarde_2"> Waarde_2 2
<input type="checkbox" value="3" name="waarde_2"> Waarde_2 3
<input type="checkbox" value="4" name="waarde_2"> Waarde_2 4
<input type="submit" value="Filter">
</form>
<div id="resultaten">
// hier moet resultaat.php komen met een ajax request
</div>
<input type="checkbox" value="1" name="waarde_1"> Waarde_1 1
<input type="checkbox" value="2" name="waarde_1"> Waarde_1 2
<input type="checkbox" value="3" name="waarde_1"> Waarde_1 3
<input type="checkbox" value="4" name="waarde_1"> Waarde_1 4
<input type="checkbox" value="1" name="waarde_2"> Waarde_2 1
<input type="checkbox" value="2" name="waarde_2"> Waarde_2 2
<input type="checkbox" value="3" name="waarde_2"> Waarde_2 3
<input type="checkbox" value="4" name="waarde_2"> Waarde_2 4
<input type="submit" value="Filter">
</form>
<div id="resultaten">
// hier moet resultaat.php komen met een ajax request
</div>
resultaat.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?php
$query = "SELECT * FROM item WHERE (id_item!='awd' ";
$i = 0;
foreach ($_POST['waarde_1'] as $item){
if (isset($item)){
if ($i==0){
$query .= ") AND ( waarde_1='".$item."'";
$i = 1;
}else{
$query .= " || waarde_1='".$item."'";
}
}
}
$i = 0;
foreach ($_POST['waarde_2'] as $item){
if (isset($item)){
if ($i==0){
$query .= ") AND ( waarde_2='".$item."'";
$i = 1;
}else{
$query .= " || waarde_2='".$item."'";
}
}
}
$query .= ") LIMIT 5";
$query = mysql_query($query);
while ($row = mysql_fetch_assoc($query)){
echo $row['waarde_2'].$row['waarde_2'].'<br>';
}
?>
$query = "SELECT * FROM item WHERE (id_item!='awd' ";
$i = 0;
foreach ($_POST['waarde_1'] as $item){
if (isset($item)){
if ($i==0){
$query .= ") AND ( waarde_1='".$item."'";
$i = 1;
}else{
$query .= " || waarde_1='".$item."'";
}
}
}
$i = 0;
foreach ($_POST['waarde_2'] as $item){
if (isset($item)){
if ($i==0){
$query .= ") AND ( waarde_2='".$item."'";
$i = 1;
}else{
$query .= " || waarde_2='".$item."'";
}
}
}
$query .= ") LIMIT 5";
$query = mysql_query($query);
while ($row = mysql_fetch_assoc($query)){
echo $row['waarde_2'].$row['waarde_2'].'<br>';
}
?>
ajax.js
Code (php)
1
2
3
4
5
2
3
4
5
$(document).ready(function(){
$('#filter').submit(function(){
$('#resultaten').load(****);
});
});
$('#filter').submit(function(){
$('#resultaten').load(****);
});
});
Nu is mijn vraag, wat moet ik op de plaats van **** zetten om die variabelen door te geven?
Gewijzigd op 26/09/2012 21:22:54 door Albert de Wit
Ikzelf geloof dat je gewoon GET-url's kan gebruiken.
script.php?doeiets=ditdus. Met POST gaat het niet werken, dan moet je $.POST() gebruiken
Gewijzigd op 26/09/2012 21:25:17 door - Ariën -
waarde_1 1
waarde_1 3
waarde_2 4
hoe geef ik juist deze 3 door via AJAX?
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
$(document).ready(function(){
$('#filter').submit(function(){
$.post('resultaat.php',$("input[type='checkbox']").serialize(),function(res){
$("#resultaten").html(res);
});
});
});
$('#filter').submit(function(){
$.post('resultaat.php',$("input[type='checkbox']").serialize(),function(res){
$("#resultaten").html(res);
});
});
});
Gewijzigd op 26/09/2012 21:31:55 door Nick Dijkstra
http://api.jquery.com/serialize/
In dat voorbeeld daar kan je 'str' gebruiken als data die je weg wilt sturen.
met PHP kan je met parse_str() deze weer uit elkaar halen...
Gewijzigd op 26/09/2012 21:35:05 door - Ariën -
Toevoeging op 26/09/2012 21:58:56:
Nick, ik heb dat van jou toegepast, helaas tevergeefs. Ik snap je code ook niet echt.
- Aar -, ik heb die pagina even doorgenomen, maar ik hoopte eigenlijk op iets te stuiten dat mij zou vertellen hoe ik die data doorstroom.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var data = {};
var inputs = document.querySelectorAll('input[type=checkbox]');
[].forEach.call(inputs, function(input) {
data[input.getAttribute('name')] = input.value;
});
$.ajax('myurl.php', data, {
type: 'POST',
context: $('#resultaten'),
success: function(result) {
$(this).html(result);
}
});
// of met de shortcut method load
$('#resultaten').load('myurl.php', data);
var inputs = document.querySelectorAll('input[type=checkbox]');
[].forEach.call(inputs, function(input) {
data[input.getAttribute('name')] = input.value;
});
$.ajax('myurl.php', data, {
type: 'POST',
context: $('#resultaten'),
success: function(result) {
$(this).html(result);
}
});
// of met de shortcut method load
$('#resultaten').load('myurl.php', data);
Niet getest, wel beredeneerd...
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
var data = $("form").serialize();
$.ajax('myurl.php', data, {
type: 'POST',
context: $('#resultaten'),
success: function(result) {
$(this).html(result);
}
});
// of met de shortcut method load
$('#resultaten').load('myurl.php', data);
$.ajax('myurl.php', data, {
type: 'POST',
context: $('#resultaten'),
success: function(result) {
$(this).html(result);
}
});
// of met de shortcut method load
$('#resultaten').load('myurl.php', data);
Ik geloof dat dit moet werken.
Kijk maar eens wat data uitspuugt.