使用AJAX

时间:2015-05-19 01:40:17

标签: javascript php jquery ajax

我在使用AJAX在jQuery中插入数据时遇到了一些麻烦。 我的代码名为login.js:

function check_login()
{
    //Mengambil value dari input username & Password
    var pulau = $('#pulau').innerHTML();
    var judul = $('#judul').innerHTML();
    var gambar = $('#gambar').innerHTML();
    var rekomendasi = $('#rekomendasi').innerHTML();
    var deskripsi = $('#deskripsi').innerHTML();
    var detail = $('#detail').innerHTML();
    var itinerary = $('#itinerary').innerHTML();
    var persiapan = $('#persiapan').innerHTML();
    var terms = $('#terms').innerHTML();

    //Ubah alamat url berikut, sesuaikan dengan alamat script pada komputer anda
    var url_login    = 'http://localhost/project/konfig/posting.php';

    //Ubah tulisan pada button saat click login
    $('#submit').attr('value','Silahkan tunggu ...');

    //Gunakan jquery AJAX
    $.ajax({
        url     : url_login,
        //mengirimkan username dan password ke script login.php
        data    : 'pulau='+pulau+'&judul='+judul+'&gambar='+gambar+'&rekomendasi='+rekomendasi+'&deskripsi='+deskripsi+'&detail='+detail+'&itinerary='+itinerary+'&persiapan='+persiapan+'&terms='+terms,
        type    : 'POST',
        //Data yang akan diambil dari script pemroses
        dataType: 'html',
        //Respon jika data berhasil dikirim
        success : function(pesan){
            if(pesan=='oke'){
                //Arahkan ke halaman admin jika script pemroses mencetak kata ok
                window.location = url_login;
            }
            else{
                //Cetak peringatan untuk username & password salah
                alert(pesan);
                $('#btnLogin').attr('value','Coba lagi ...');
        }
        }
    });
}

这是dest.php的代码:

<?php
session_start();
include('core.php');
include('ui.php');
database();
global $judul;
global $deskripsi;
global $gambar;
global $pulau;
global $rekomendasi;
global $detail;
global $itinerary;
global $persiapan;
global $terms;
$id=$_REQUEST['edit'];
$uid=$_REQUEST['hapus'];
if($_REQUEST['edit'] && $_REQUEST['edit'] == $id){
    edit_posting();
}else
if($_REQUEST['hapus'] && $_REQUEST['hapus'] == $uid){
    hapus_posting();
}
$q=mysql_query("INSERT INTO `destinasi` (`id`,`judul`,`deskripsi`,`gambar`,`pulau`,`rekomendasi`,`detail`,`itinerary`,`persiapan`,`terms`) VALUES (NULL,'$judul','$deskripsi','$gambar','$pulau','$rekomendasi','$detail','$itinerary','$persiapan','$terms')");
?>
<!doctype html>
<head>
<title>Posting Baru</title>
</head>
<body>
    <div class='app-bar'>
        <a href='./home.php' class='app-bar-element'><span class='mif-arrow-left icon fg-white'></span></a> 
    </div>
                    <div class='padding10 no-padding-top'>
                    <div class='input-control select'>
                    <form method='post'>
                        <select name='pulau' id='pulau'>
                            <option value='jawa'>Jawa</option>
                            <option value='sumatera'>Sumatera</option>
                            <option value='sulawesi'>Sulawesi</option>
                            <option value='kalimantan'>Kalimantan</option>
                            <option value='lain'>Pulau lain</option>
                        </select>
                    </div>
<br />
                        <input type='text' id='judul' class='input-control text' style='width:50%;' name='judul' placeholder='Judul' required />
                        <input type='text' id='gambar' class='input-control text' style='width:50%;' name='gambar' placeholder='Image Featured Link e.g: ajak_sawarna.jpg'>
                        <input type='text' id='rekomendasi' class='input-control text' style='width:50%;' name='rekomendasi' placeholder='Tulis rekomendasi/sambutan singkat tentang postinganmu' required />

<div id='deskripsi' class='editable' style='border:1px solid black;width:100%;height:300px;overflow:auto;'>
Tulis Deskripsi disini
</div>
<div id='details' class='editable' style='border:1px solid black;width:100%; height:200px;overflow:auto;'>
Tulis Detail disini
</div>
<div id='itinerary' class='editable' style='border:1px solid black;width:100%; height:200px;overflow:auto;'>
Tulis itinerary disini
</div>
<div  id='persiapan' class='editable' style='border:1px solid black;width:100%; height:200px;overflow:auto;'>
Tulis Persiapan disini
</div>
<div  id='terms' class='editable' style='border:1px solid black;width:100%; height:200px;overflow:auto;'>
Tulis terms disini
</div>
<button onclick='check_login()' id='submit' name='submit' value='Posting!'>Login</div>
        </div>
        </form>
</body>
</html>

我在本节中感到头晕:

data    : 'pulau='+pulau+'&judul='+judul+'&gambar='+gambar+'&rekomendasi='+rekomendasi+'&deskripsi='+deskripsi+'&detail='+detail+'&itinerary='+itinerary+'&persiapan='+persiapan+'&terms='+terms,

为什么代码不起作用?

我在StackOverflow网站上读过,但仍然无法正常工作。可以帮帮我吗?

2 个答案:

答案 0 :(得分:2)

在Javascript中,使用:

    data    : { pulau: pulau,
                judul: judul,
                gambar: gambar,
                ...
              },

如果值中有任何特殊字符,则需要对它们进行编码,当您在此处为对象提供对象时,jQuery会自动为您执行此操作(当您自己制作字符串时,您需要在每个值上调用encodeURIComponent()

在PHP脚本中,您无法访问参数。而不是

global $judul;

它应该是:

$judul = mysql_real_escape_string($_REQUEST['judul']);

和所有其他已发布的变量相同。

答案 1 :(得分:0)

我不知道您是否在原始代码中添加了对jQuery库的引用,但如果没有,请确保在html代码中添加以下行。

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

同样在check_login()函数中将.innerHTML()更改为.val(),它应该将值传递给url。