使用jquery Ajax加载从数据库信息 [英] using jquery ajax to load info from database

问题描述

问题

我尝试使用以下

  //启动方法1

VAR grbData = $阿贾克斯（{
    键入：GET，
    网址：http://grb.sonoma.edu:81/getgrbs.php
    数据：开始= 0＆安培; perPage = 3}）的responseText;。

$（＃ajaxDiv）HTML（grbData）。

// End方法1

//开始方法2

$获得（getgrbs.php，{开始：0，perPage：3}，
    功能（数据）{
    $（＃TST）HTML（数据）;
    }，HTML）;

// End方法2
 

本页面： http://grb.sonoma.edu:81/paging.php 从数据库加载数据。方法1只出现在IE8但只有在刷新网页的工作。当第一次加载页面我碰到一个要完成此操作的数据尚未公布。错误。

我preFER方法1的原因是因为它让我获得个人的表中的行。例如。每一行都有一个类，爆裂。我使用

  $（突发）。点击（函数（）{
    $（爆）的CSS（背景色，）。
    $（本）的CSS（背景色，黄）;
    }）;
 

点击时改变所选择的行的颜色。这只能出现与方法1的工作，而不是方法2。

以上所有的code在封装在$（文件）。就绪（）。我试图

  $（＃ajaxDiv）的负载（getgrbs.php，{开始：0，perPage：3}）;
 

但我得到的结果与方法2。

我怎样才能获得的点击功能与方法2工作或获得方法1工作在所有的浏览器不刷新的情况？感谢您的帮助，我可以得到这一点。

我需要这样做的阿贾克斯（AJAX试过没有jQuery和没有运气有其一），因为会出现在页面上其他的事情，不会改变通过数据的用户的页面。

补遗液（最好在回答液）

用成功成功后，我注意到，有能力点击一行，并有背景色变化不见了。所以，我做了以下，这似乎工作。不知道这是否是最好的方式。

  VAR grbData = $阿贾克斯（{
键入：GET，
网址：http://grb.sonoma.edu:81/getgrbs.php
数据：开始= 0＆安培; perPage = 3，
数据类型：HTML，
成功：功能（数据）{
$（＃ajaxDiv）replaceWith（数据）。
startInteraction（）;
}
}）;

功能startInteraction（）{
    $（突发）。点击（函数（）{
    $（爆）的CSS（背景色，）。
    $（本）的CSS（背景色，黄）;
    }）;
}
 

解决方案

尝试：

  VAR grbData = $阿贾克斯（{
        键入：GET，
        网址：http://grb.sonoma.edu:81/getgrbs.php
        数据：开始= 0＆安培; perPage = 3，
        成功：函数（HTML）{
            $（＃ajaxDiv）HTML（HTML）。
        }
}）;
 

它不工作的原因是，它试图在它之前完成加载使用你的HTML。在code正在执行速度比返回结果。

要保持你的点击事件，您可以使用.live所以它会触发事件添加到页面的未来元素，就像你阿贾克斯code。

  $（文件）。就绪（函数（）{
    $（突发）。生活（点击，函数（）{
        $（爆）的CSS（背景色，）。
        $（本）的CSS（背景色，黄）;
    }）;
}）;
 

Problem

I tried using the following

// Start method 1

var grbData = $.ajax({
    	type : "GET",
    	url : "http://grb.sonoma.edu:81/getgrbs.php",
    	data : "start=0&perPage=3"}).responseText;

$("#ajaxDiv").html(grbData);

// End method 1

// Start method 2

$.get("getgrbs.php", { start : 0, perPage : 3},
    	function(data) {
    		  $("#tst").html(data);
    	}, "html");

// End method 2

on this page: http://grb.sonoma.edu:81/paging.php to load data from a database. Method 1 only appears to work in IE8 but only after the page is refreshed. When the page is first loaded I get a "The data necessary to complete this operation is not yet available." error.

The reason I prefer Method 1 is because it gives me access to individual rows in the table. E.g. Each row has a class, "burst." I am using

$(".burst").click(function() {
    	$(".burst").css("background-color", "");
    	$(this).css("background-color", "yellow");
    });

to change the color of the selected row when clicked. This only appears to work with Method 1 and not method 2.

All of the above code in encapsulated in $(document).ready(). I have tried

$("#ajaxDiv").load("getgrbs.php", { start : 0, perPage : 3});

but I get results similar to Method 2.

How can I get the click function to work with Method 2 or get Method 1 to work on all browsers without refresh? Thanks for any help I can get for this.

I need to do this in ajax (tried ajax without jquery and no luck there either) since there will be other things on the page that will not change as the user pages through the data.

Addendum to solution (better solution in answer)

After successfully using "success" I noticed that the ability to click on row and have the bg color change was gone. So I did the following, which appears to work. Not sure it if is the best way.

var grbData = $.ajax({
	type : "GET",
	url : "http://grb.sonoma.edu:81/getgrbs.php",
	data : "start=0&perPage=3",
	dataType : 'html',
	success: function (data) {
			$("#ajaxDiv").replaceWith(data);
			startInteraction();
		}
});

function startInteraction() {
    $(".burst").click(function() {
    	$(".burst").css("background-color", "");
    	$(this).css("background-color", "yellow");
    });
}

解决方案

Try:

var grbData = $.ajax({
        type : "GET",
        url : "http://grb.sonoma.edu:81/getgrbs.php",
        data : "start=0&perPage=3",
        success: function (html) {
            $("#ajaxDiv").html(html);
        }
});

The reason it isn't working is that it's trying to use your html before it's finished loading. The code is executing faster than the result is returned.

To keep your click event, you can use .live so it will fire the event for future elements added to the page, like you ajax code.

$(document).ready( function () {
    $(".burst").live('click',function() {
        $(".burst").css("background-color", "");
        $(this).css("background-color", "yellow");
    });
});

这篇关于使用jquery Ajax加载从数据库信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！