Fatal编程技术网
  • javascript/
  • Javascript 不重新加载页面的Onclick

Javascript 不重新加载页面的Onclick

javascript php html

Javascript 不重新加载页面的Onclick,javascript,php,html,Javascript,Php,Html,我有两个url，如下所示： <td><a href='infomation/gc_details_2.php?id=<?php echo $row['trans_id']?>'><input type='button' id="yes" value='Yes'></a></td> <td><a href='infomation/del_notifi_2.php?id=<?php ec

我有两个url，如下所示：

    <td><a href='infomation/gc_details_2.php?id=<?php echo $row['trans_id']?>'><input type='button' id="yes"  value='Yes'></a></td>
    <td><a href='infomation/del_notifi_2.php?id=<?php echo $row['trans_id']?>'><input type='button' value='No'></a></td>
当点击按钮
Yes
时，它请求
gc\u details\u 2.php
并重新加载所有带有搜索结果的页面。现在我想在不重新加载页面的情况下单击按钮
Yes
。我该怎么办？谢谢大家使用

例如：

 $('#yes').click(function() {
    $.ajax({
      url: your_url,
      type: (GET or POST),
      data: {data: your_data},
      success: function(response) {
         alert('Success!');
       }
    });
  });
使用

例如：

 $('#yes').click(function() {
    $.ajax({
      url: your_url,
      type: (GET or POST),
      data: {data: your_data},
      success: function(response) {
         alert('Success!');
       }
    });
  });
您应该改用ajax。另外，在链接中使用按钮也是不好的做法。你要么选择链接，要么选择按钮。我已经删除了这里的链接并使用了这个按钮

HTML:

<td><input type='button' id="yes" value='Yes' trans_id="<?php echo $row['trans_id']?>"></td>

$("#yes").click(function(){
    var trans_id=$(this).attr("trans_id");
    $.ajax({
        url:'infomation/gc_details_2.php',
        data:{
            "id":trans_id
        },
        type:"GET",
        success:function(data){
        }
    });
    return false;
});

<a href="infomation/gc_details_2.php?id=<?=$row['trans_id']?>" class="button ajax-fetch">Yes</a>

jQuery(".ajax-fetch").click(function(e){
   e.preventDefault();
   jQuery.get(jQuery(this).attr("href"), function(data) {
      jQuery("#result").html(data);
   });
});

<div id="result"></div>
您应该改用ajax。另外，在链接中使用按钮也是不好的做法。你要么选择链接，要么选择按钮。我已经删除了这里的链接并使用了这个按钮

HTML:

<td><input type='button' id="yes" value='Yes' trans_id="<?php echo $row['trans_id']?>"></td>

$("#yes").click(function(){
    var trans_id=$(this).attr("trans_id");
    $.ajax({
        url:'infomation/gc_details_2.php',
        data:{
            "id":trans_id
        },
        type:"GET",
        success:function(data){
        }
    });
    return false;
});

<a href="infomation/gc_details_2.php?id=<?=$row['trans_id']?>" class="button ajax-fetch">Yes</a>

jQuery(".ajax-fetch").click(function(e){
   e.preventDefault();
   jQuery.get(jQuery(this).attr("href"), function(data) {
      jQuery("#result").html(data);
   });
});

<div id="result"></div>
试试这个

    <td><input type='button' id="yes"  class="<?php echo $row['trans_id']?>" value='Yes'></td>

    $("#yes").click(function(){
        var trans_id=$(this).attr("class");
        $.ajax({
           url:'infomation/gc_details_2.php',
            data:{"id":trans_id},      
            type:"GET",
            success:function(data){
alert("ssfasfas");
            }
        });
    });
试试这个

    <td><input type='button' id="yes"  class="<?php echo $row['trans_id']?>" value='Yes'></td>

    $("#yes").click(function(){
        var trans_id=$(this).attr("class");
        $.ajax({
           url:'infomation/gc_details_2.php',
            data:{"id":trans_id},      
            type:"GET",
            success:function(data){
alert("ssfasfas");
            }
        });
    });

这是所有
$（“#是”）中最简单的一个。单击（函数（）{
$.get（'gc\u details\u 2.php'，函数（数据）{
$（'html'）.html（数据）；
});
返回false；
});

而且它总是有效的。这是最简单的
$（'#yes'）。单击（函数（）{
$.get（'gc\u details\u 2.php'，函数（数据）{
$（'html'）.html（数据）；
});
返回false；
});

而且它总是有效的
设置锚定标签的样式，使其具有所需的按钮效果，并转储按钮：

Html:


<td><input type='button' id="yes" value='Yes' trans_id="<?php echo $row['trans_id']?>"></td>



$("#yes").click(function(){
    var trans_id=$(this).attr("trans_id");
    $.ajax({
        url:'infomation/gc_details_2.php',
        data:{
            "id":trans_id
        },
        type:"GET",
        success:function(data){
        }
    });
    return false;
});



<a href="infomation/gc_details_2.php?id=<?=$row['trans_id']?>" class="button ajax-fetch">Yes</a>



jQuery(".ajax-fetch").click(function(e){
   e.preventDefault();
   jQuery.get(jQuery(this).attr("href"), function(data) {
      jQuery("#result").html(data);
   });
});



<div id="result"></div>


结果容器：


<td><input type='button' id="yes" value='Yes' trans_id="<?php echo $row['trans_id']?>"></td>



$("#yes").click(function(){
    var trans_id=$(this).attr("trans_id");
    $.ajax({
        url:'infomation/gc_details_2.php',
        data:{
            "id":trans_id
        },
        type:"GET",
        success:function(data){
        }
    });
    return false;
});



<a href="infomation/gc_details_2.php?id=<?=$row['trans_id']?>" class="button ajax-fetch">Yes</a>



jQuery(".ajax-fetch").click(function(e){
   e.preventDefault();
   jQuery.get(jQuery(this).attr("href"), function(data) {
      jQuery("#result").html(data);
   });
});



<div id="result"></div>







这将捕获您使用类“ajax fetch”单击的任何对象，并遵循href，然后将其加载到结果div中。使用一些CSS设置button类的样式。
设置锚定标记的样式以获得所需的按钮效果，并转储按钮：

Html:


<td><input type='button' id="yes" value='Yes' trans_id="<?php echo $row['trans_id']?>"></td>



$("#yes").click(function(){
    var trans_id=$(this).attr("trans_id");
    $.ajax({
        url:'infomation/gc_details_2.php',
        data:{
            "id":trans_id
        },
        type:"GET",
        success:function(data){
        }
    });
    return false;
});



<a href="infomation/gc_details_2.php?id=<?=$row['trans_id']?>" class="button ajax-fetch">Yes</a>



jQuery(".ajax-fetch").click(function(e){
   e.preventDefault();
   jQuery.get(jQuery(this).attr("href"), function(data) {
      jQuery("#result").html(data);
   });
});



<div id="result"></div>


结果容器：


<td><input type='button' id="yes" value='Yes' trans_id="<?php echo $row['trans_id']?>"></td>



$("#yes").click(function(){
    var trans_id=$(this).attr("trans_id");
    $.ajax({
        url:'infomation/gc_details_2.php',
        data:{
            "id":trans_id
        },
        type:"GET",
        success:function(data){
        }
    });
    return false;
});



<a href="infomation/gc_details_2.php?id=<?=$row['trans_id']?>" class="button ajax-fetch">Yes</a>



jQuery(".ajax-fetch").click(function(e){
   e.preventDefault();
   jQuery.get(jQuery(this).attr("href"), function(data) {
      jQuery("#result").html(data);
   });
});



<div id="result"></div>







这将捕获您使用类“ajax fetch”单击的任何对象，并遵循href，然后将其加载到结果div中。使用一些CSS来设置button类的样式。
锚定和按钮都将捕获单击，将锚定样式改为按钮。您是否检查了控制台，它给出了任何错误？试图澄清您的意图，1）您是否试图根据单击的按钮发送GET请求？如果是这样，当浏览器从请求接收数据时应该做什么（GET请求最好只获取数据，而不修改服务器上的任何内容）。2） 若您试图在服务器上发送一些数据/更新数据，那个么它应该是一个POST/PUT/PATCH/DELETE请求。在这两种情况下，您最好使用按钮触发对服务器的JS Ajax调用，因为您不希望出现伴随锚定的页面刷新。锚定和按钮都将捕获点击，将锚定样式改为按钮。您是否检查了控制台，它会给出任何错误？试图澄清您的意图，1）您是否尝试根据单击的按钮发送GET请求？如果是这样，当浏览器从请求接收数据时应该做什么（GET请求最好只获取数据，而不修改服务器上的任何内容）。2） 若您试图在服务器上发送一些数据/更新数据，那个么它应该是一个POST/PUT/PATCH/DELETE请求。在这两种情况下，您最好使用按钮触发对服务器的JS Ajax调用，因为您不希望伴随锚定的页面刷新。该按钮没有任何参数“trans_id”，因此您的var trans_id值将是未定义的。既然你已经编辑了你的答案。。为什么不使用锚定标记并捕获href值呢？请检查html部分按钮@Black 23i，但当我点击按钮时。无任何更改：（
input
as
按钮
不会重定向。无论如何，更改的代码、添加的
返回false
将停止重定向。立即检查。按钮没有任何参数“trans\u id”因此，您的var trans_id值将是未定义的。现在您已经编辑了答案。为什么不使用锚定标记并捕获href值？请检查html部分按钮@Black 23i。我尝试过，但当我单击按钮时。没有任何更改：（
input
as
按钮
不会重定向。无论如何，更改的代码、添加的
return false
将停止重定向。现在检查。这将真正妨碍为输入使用任何有意义的类。类用于CSS标记，而不是保存数据。data-*属性用于此目的，或者在这种情况下，我们可以使用使用已包含有效HTML标记中的链接的锚属性。我尝试了，但当我单击按钮时。未发生任何更改：（您是否成功设置了警报？未显示警报，则未发生任何事件。页面未加载：（这确实会妨碍对输入使用任何有意义的类。类用于CSS标记，而不是保存数据。data-*属性用于此目的，或者在本例中，我们可以使用已包含有效HTML标记中链接的锚属性。我尝试过，但当我单击按钮时。没有任何更改：（你把警报设置为成功了吗？它没有显示警报，什么也没有发生。页面没有加载：（它不工作：（它重定向到
gc_细节_2.php
wrap in
$（function（）{}）；
它不工作：（它重定向到
gc_细节_2.php
wrap in
$（function（）{}）
它不工作：（它重定向到
gc\u details\u 2.php
使用我的html作为锚标记是很重要的，因为它有类“ajax fetch”这就是jQuery将要绑定到的。我知道结果将显示在
div result
中，但当我单击按钮时，它仍然重定向到
gc\u details\u 2.php
No按钮。从锚标记内部删除按钮。哦，对不起，我错了。但是我复制了您的代码并插入到我的代码中，没有任何更改。结果仍然是这样，它不起作用：（它重定向到
gc\u details\u 2.php
使用我的html作为锚标记很重要，因为它有一个类“ajax fetch”，jQuery将绑定到这个类。我知道结果将显示在
div result
中，但是