[AJAX] XMLHttpRequest pour un insert en base

**CaraLePoke** · 05/09/2013, 16h40

Je tente un simple insert en base avec XMLHttpRequest...
Voila la fonction javascript (qui permet de sauver la base dans WebSQL si le navigateur est offline):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function insert(){
	var xmlhttp;
	var nom = document.getElementById('nom');
	var nom_value = nom.value;
	var prenom = document.getElementById('prenom');
	var prenom_value = prenom.value;
	db.transaction(
		function(t){
			t.executeSql("INSERT INTO GVAppTest2 VALUES (?,?)", [nom_value,prenom_value]);
		}
	);
	if (window.navigator.onLine) {
		alert('ajoute a la base online');
		var stringRequest="insert.php?nom="+nom_value;
		xmlhttp=new XMLHttpRequest();
		xmlhttp.open("GET",stringRequest,true);
		xmlhttp.send(null);
 
} 
};

et la page insert.php:

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
$q = $_GET['nom'];
 
$con = mysqli_connect('localhost','root','root','GVApp');
if (!$con)
  {
  die('Could not connect: ' . mysqli_error($con));
  }
 
$sql="INSERT INTO resultats Nom Values '".$q."'";
 
$result = mysqli_query($con,$sql);
 
mysqli_close($con);
?>

J'ai l'impression que le xmlhttp.open ne fait rien (c'est un sacré branleur...). J'ai rien en base, pas de message d'erreur. Rien...

Si vous avez une solution, je suis preneur.
D'avance merci

**CaraLePoke** · 10/09/2013, 11h04

J'ai avancé. En fait ça ne fonctionnais pas en local. Apparement un problème dans la config de mon MAMP...

Maintenat j'ai un problème de cache manifest.
voila le code HTML:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html manifest="gvapp.manifest">
<head>
	<link href="style.css" rel="stylesheet" media="all" type="text/css">
<script>
 
window.onload  = function(){
if (window.openDatabase){
        db = openDatabase("gv_db", "1.0", "Web SQL Storage Demo Database", 1*1024*1024); 
        if (db){ 
                db.transaction(
                function(t){
                        t.executeSql("CREATE TABLE IF NOT EXISTS GVApp (nom TEXT, prenom TEXT)");
                        }
                );
        } else {
                alert('Pas de BD ouverte');
                }
} else {
        alert("Votre navigateur ne supporte pas WebSQL");
        }
 
};
 
function vidange(){
        db.transaction(
                function(t){
                        t.executeSql("DELETE FROM GVApp");
                }
        );
                
};
 
function insert(){
        var nom = document.getElementById('nom');
        var nom_value = nom.value;
        var prenom = document.getElementById('prenom');
        var prenom_value = prenom.value;
        db.transaction(
                function(t){
                        t.executeSql("INSERT INTO GVApp VALUES (?,?)", [nom_value,prenom_value]);
                                        }
        );
        if (window.navigator.onLine){
        db.transaction(
                function(t){
                        t.executeSql("SELECT nom AS nom, prenom AS prenom FROM GVApp",[],function(t,r){
                                for (var i=0;i<r.rows.length;i++){
                                        nomloc=r.rows.item(i).nom;
                                        prenomloc=r.rows.item(i).prenom;
                                        xhr = new XMLHttpRequest();
                                        xhr.open("GET", "insert.php?nom=" + nomloc + "&prenom=" + prenomloc, true);
                                        xhr.send(null);
                                        }
                                });
                        }
        );
        vidange();
        }
};
 
function showWarningDiv(status){
var warningdiv = document.getElementById("warning");
if (status == "on"){
warningdiv.innerHTML = "<p style=\"padding:3px;\">Vous etes  online.</p>";
} else {
warningdiv.innerHTML = "<p style=\"padding:3px;\">Vous etes offline.</p>";
        }
};
 
 
</script>
</head>
<body>
<img src="logo.png">
<h1>Formulaire WebSQL Tests</h1>
<div id="main">
<form method="" action="" id="cf_form">
<TABLE BORDER=0>
<TR>
	<TD>Nom</TD>
	<TD>
	<INPUT type=text name="nom" id="nom">
	</TD>
</TR>
<TR>
	<TD>Pr&eacutenom</TD>
	<TD>
	<INPUT type=text name="prenom" id="prenom">
	</TD>
</TR>
<TR>
	<TD>eMail</TD>
	<TD>
	<INPUT type=text name="mail" id="mail">
	</TD>
</TR>
<TR>
	<TD>Choisir une carte:</TD>
	<TD>
	Carte 1: <INPUT type=radio name="carte" id="carte" value="CF1">
	<br>Carte 2 : <INPUT type=radio name="carte" id="carte" value="CF2">
	<br>Carte 2 : <INPUT type=radio name="carte" id="carte" value="CF2">
	</TD>
</TR>
 
<TR>
	<TD>Type</TD>
	<TD>
	<SELECT name="type" id="type">
		<OPTION VALUE="structure">Structure</OPTION>
		<OPTION VALUE="magasin">Magasin</OPTION>
		<OPTION VALUE="plateforme">Plateforme</OPTION>
	</SELECT>
	</TD>
</TR>
<TR>
<TD COLSPAN=2>
<input type="button" name="btvidange" value="Vidange!" onclick=" return vidange();"  />
<input type="button" name="btsubmit" value="Submit!"   onclick=" return insert();"/>
</TD>
</TR>
</TABLE>
</form>
</div>
<br>
<div id="warning"></div>
</body>
 
<script type="text/javascript">
window.addEventListener( "offline", function(){showWarningDiv("off")}, false);
window.addEventListener( "online", function(){showWarningDiv("on")}, false);
</script>
</html>

Le code PHP:

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
header("Content-Type: text/plain");
$nom = $_GET['nom'];
$prenom = $_GET['prenom'];
 
$con = mysqli_connect("10.152.45.168","opgv","aikVGR","opgv");
if (!$con)
  {
  die('Could not connect: ' . mysqli_error($con));
  }
 
$sql="INSERT INTO gvapp (nom, prenom) Values ('". $nom ."', '". $prenom ."')";
 
$result = mysqli_query($con,$sql);
 
mysqli_close($con);
?>

et le Cache manifest:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
CACHE MANIFEST
 
CACHE:
logo.png
style.css
index.html
 
NETWORK:
insert.php

Pour lui j'ai aussi essayé sans la partie NETWORK et aussi en mettant insert.php dans le CACHE. Sans succès...

Quand le cache est en place, la mise à jour de la base online ne fonctionne pas. l'action insert.php?nom=teston1&prenom=teston1 reste pending dans l'outil dev de chrome et renvoie une erreur

Auriez vous une idée?

**CaraLePoke** · 17/09/2013, 10h33

J'ai trouvé la solution:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
CACHE MANIFEST
 
CACHE:
index.html
logo.png
style.css
 
NETWORK:
*

c'est l'* dans le NETWORK qui change tout

[AJAX] XMLHttpRequest pour un insert en base

AJAX

Vue hybride

Discussions similaires

Partager

Partager