[AJAX] Ajout résultats dans base de données mysql

**jeanmaki** · 12/12/2013, 14h07

Bonjour, je crée un exercice de calcul mental en javascript/php/mysql et je n'arrive pas à enregistrer mes résultats dans la base de données mysql

Voici mes codes :

index2.php

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
<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Calcul mental</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/foundation.min.css">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
 
</head>
<body>
 
	<div class="row">
		<h1>Calcul Mental</h1>
		<div class="columns large-12">
			<h2>Quel est le résultat de ? </h2>
			<div class="columns large-6">
				<form class="mental_form2" action="calcul.php">
					<div class="columns large-4">
						<input class="champ" type="text" name="n1" id="n1">
					</div>
					<div class="columns large-4">
						<input class="champ" type="text" name="si1" id="si1">
					</div>
					<div class="columns large-4">
						<input class="champ" type="text" name="n2" id="n2">
					</div>
					<div class="columns large-4">
						<label for="reponse">Votre réponse</label>
					</div>
					<div class="columns large-4">
						<input type="text" name="result" id="result">
					</div>
					<div class="columns large-4">
						<input type="submit"  id="validation" value="Valider" class="button small right">
					</div>
				</form>
			</div>
			<div class="columns large-6 res">
 
			</div>
		</div>
	</div>
	<span id="chronotime">0:00:00:00</span>
	<script src="js/api.js"></script>
</body>
</html>

api.js

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
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
startTime = 0
var start = 0
var end = 0
var diff = 0
var timerID = 0
function chrono(){
    end = new Date()
    diff = end - start
    diff = new Date(diff)
    var msec = diff.getMilliseconds()
    var sec = diff.getSeconds()
    var min = diff.getMinutes()
    var hr = diff.getHours()-1
    if (min < 10){
        min = "0" + min
    }
    if (sec < 10){
        sec = "0" + sec
    }
    if(msec < 10){
        msec = "00" +msec
    }
    else if(msec < 100){
        msec = "0" +msec
    }
    document.getElementById("chronotime").innerHTML = hr + ":" + min + ":" + sec + ":" + msec
    timerID = setTimeout("chrono()", 10)
}
 
function chronoStop(){
    clearTimeout(timerID)
}
function chronoContinue(){
    start = new Date()-diff
    start = new Date(start)
    chrono()
}
 
function chronoStart(){
    start = new Date()
    chrono()
}
 
function init(){
    var n1 = 1 + Math.floor(Math.random() * 10);
    var si1 = '+';
    var n2 = 1 + Math.floor(Math.random() * 10);
    $('#n1').val(n1);
    $('#si1').val(si1);
    $('#n2').val(n2);
}
function success(){
    $('.res').html('<div data-alert class="success alert-box">Bien joué ! <a href="#" class="close">&times;</a></div>');
}
function error(){
    $('.res').html('<div data-alert class="alert alert-box">Dommage ! même joueur joue encore ! <a href="#" class="close">&times;</a></div>'); 
}
function send(){
 
                $('.mental_form2').submit(function() {
                alert('jusque la ok');
                $.post('calcul.php', { n1: $('.mental_form2 input[name=n1]').val(),
                                        si1: $('.mental_form2 input[name=si1]').val(),
                                        n2: $('.mental_form2 input[name=n2]').val(),
                                        result: $('.mental_form2 input[name=result]').val()
                                        }
                );
                return false;
            });
}
function check(){
    var n1 = $('#n1').val();
    var si1 = $('#si1').val();
    var n2 = $('#n2').val();
    var r1 = parseInt(n1) + parseInt(n2);
    var r2 = $('#result').val();
    if( r1 == r2){
        send();
        success();
    }else{
        error();
    }
    $('#result').val('');
}
$(document).ready(function(){
    init();
    chronoStart();
})
$('#validation').click(function(event){
    event.preventDefault();
    check();
    init();
})

calcul.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
18
19
20
21
22
23
24
25
26
27
28
29
<?php
session_start();
// set error reporting level
if (version_compare(phpversion(), '5.3.0', '>=') == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);
 
require_once('classes/CMySQL.php');
require_once('classes/Ccalcul.php');
 
 
if ($_SESSION['member_id'] && $_SESSION['member_status'] == 'active' && $_SESSION['member_role'])
 
{
    $sChi1 = $GLOBALS['MySQL']->escape($_POST['n1']);
    $sSi1 = $GLOBALS['MySQL']->escape($_POST['si1']);
    $sChi2 = $GLOBALS['MySQL']->escape($_POST['n2']);
    $sVotresultat1 = $GLOBALS['MySQL']->escape($_POST['result']);
 
    if ($sChi1 && $sSi1 && $sVotresultat1 && $sVotresultat1)
 
            {
                $Accept2 = $GLOBALS['Ccalcul']->acceptcalcul1();
            }
}
echo (file_get_contents('templates/index2.php'));
 
?>

Ccalcul.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
18
19
20
21
22
23
24
25
<?php
class Ccalcul {
    function Ccalcul() {}
    // Accept votresultat
    function acceptcalcul()
        {
            $sChiffre1 = $GLOBALS['MySQL']->escape($_POST['n1']);
            $sSigne1 = $GLOBALS['MySQL']->escape($_POST['si1']);
            $sChiffre2 = $GLOBALS['MySQL']->escape($_POST['n2']);
            $sVotresultat = $GLOBALS['MySQL']->escape($_POST['result']);
        if ($sChiffre1 && $sSigne1 && $sChiffre2 && $sVotresultat)
            {
                $bRf = "INSERT INTO `addition` SET
                    `chiffre1` = '{$sChiffre1}',
                    `signe1` = '{$sSigne1}',
                    `chiffre2` = '{$sChiffre2}',
                    `votresultat` = '{$sVotresultat}'";
 
                $GLOBALS['MySQL']->res($bRf);
 
            }
        }
 
}
$GLOBALS['Ccalcul'] = new Ccalcul();

CMySQL.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
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
<?php
class CMySQL {
 
    // variables
    var $sDbName;
    var $sDbUser;
    var $sDbPass;
 
    var $vLink;
 
    // constructor
    function CMySQL() {
        $this->sDbName = 'site3';
        $this->sDbUser = 'root';
        $this->sDbPass = '';
 
        // create db link
        $this->vLink = mysql_connect("localhost", $this->sDbUser, $this->sDbPass);
 
        //select the database
        mysql_select_db($this->sDbName, $this->vLink);
 
        mysql_query("SET names ISO-8859-1");
    }
 
    // return one value result
    function getOne($query, $index = 0) {
        if (! $query)
            return false;
        $res = mysql_query($query);
        $arr_res = array();
        if ($res && mysql_num_rows($res))
            $arr_res = mysql_fetch_array($res);
        if (count($arr_res))
            return $arr_res[$index];
        else
            return false;
    }
 
    // executing sql
    function res($query, $error_checking = true) {
        if(!$query)
            return false;
        $res = mysql_query($query, $this->vLink);
        if (!$res)
            $this->error('Database query error', false, $query);
        return $res;
    }
 
    // return table of records as result in pairs
    function getPairs($query, $sFieldKey, $sFieldValue, $arr_type = MYSQL_ASSOC) {
        if (! $query)
            return array();
 
        $res = $this->res($query);
        $arr_res = array();
        if ($res) {
            while ($row = mysql_fetch_array($res, MYSQL_ASSOC)) {
                $arr_res[$row[$sFieldKey]] = $row[$sFieldValue];
            }
            mysql_free_result($res);
        }
        return $arr_res;
    }
 
    // return table of records as result
    function getAll($query, $arr_type = MYSQL_ASSOC) {
        if (! $query)
            return array();
 
        if ($arr_type != MYSQL_ASSOC && $arr_type != MYSQL_NUM && $arr_type != MYSQL_BOTH)
            $arr_type = MYSQL_ASSOC;
 
        $res = $this->res($query);
        $arr_res = array();
        if ($res) {
            while ($row = mysql_fetch_array($res, $arr_type))
                $arr_res[] = $row;
            mysql_free_result($res);
        }
        return $arr_res;
    }
 
    // return one row result
    function getRow($query, $arr_type = MYSQL_ASSOC) {
        if(!$query)
            return array();
        if($arr_type != MYSQL_ASSOC && $arr_type != MYSQL_NUM && $arr_type != MYSQL_BOTH)
            $arr_type = MYSQL_ASSOC;
        $res = $this->res ($query);
        $arr_res = array();
        if($res && mysql_num_rows($res)) {
            $arr_res = mysql_fetch_array($res, $arr_type);
            mysql_free_result($res);
        }
        return $arr_res;
    }
 
    // escape
    function escape($s) {
        return mysql_real_escape_string(strip_tags($s));
    }
 
    // get last id
    function lastId() {
        return mysql_insert_id($this->vLink);
    }
 
    // display errors
    function error($text, $isForceErrorChecking = false, $sSqlQuery = '') {
        echo $text; exit;
    }
}
 
$GLOBALS['MySQL'] = new CMySQL();

Dans api.js le

Code :

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

alert('jusque la ok');

ne s'affiche pas.

Merci de éclairer

**NoSmoking** · 12/12/2013, 19h03

Bonjour,
au moins 2 raisons pour que cela ne s'affiche pas
- erreur dans le code qui précède
- la fonction n'est jamais appelée

regarde au moins la 2éme.

**jeanmaki** · 14/12/2013, 22h37

Salut,
quelle fonction?

**NoSmoking** · 15/12/2013, 07h13

Tu appelles ta fonction send() qui définie ce que doit faire ta FORM sur le submit, mais est-elle pour autant "submitée"?

**jeanmaki** · 15/12/2013, 13h32

dans la fonction check() j'ai mis la fonction send() donc elle se lance bien non? puisque lorsque je fait

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
function send(){ 
 
         alert('jusque la ok');         
        $('.mental_form2').submit(function() {
        $.post('calcul.php', { n1: $('.mental_form2 input[name=n1]').val(),
                        si1: $('.mental_form2 input[name=si1]').val(),
                    n2: $('.mental_form2 input[name=n2]').val(),
                    result: $('.mental_form2 input[name=result]').val()
                    }
                );
                return false; 
            });
}
function check(){
    var n1 = $('#n1').val();
    var si1 = $('#si1').val();
    var n2 = $('#n2').val();
    var r1 = parseInt(n1) + parseInt(n2);
    var r2 = $('#result').val();
    if( r1 == r2){
        send();
        success();
    }else{
        error();
    }
    $('#result').val('');
}
$(document).ready(function(){
    init();
    chronoStart();
})
$('#submit').click(function(event){
    event.preventDefault();
    check();
    init();
})

le message d'alert est affiché

**NoSmoking** · 15/12/2013, 21h28

à lire .submit()

[AJAX] Ajout résultats dans base de données mysql

AJAX

Vue hybride

Discussions similaires

Partager

Partager