在ajax函数中隐藏jquery元素

Posted 2023-05-08

【中文标题】在ajax函数中隐藏jquery元素

【英文标题】：hide jquery elements in an ajax function

【发布时间】：2018-08-13 20:19:25

【问题描述】：

我正在尝试使用 jquery 和 $.ajax () 方法提交表单。将信息提交到服务器时，我只希望保留结果并隐藏页面的其余部分。我是否能够在 ajax 方法中添加一个条件，说明“if(success) 然后显示结果，同时隐藏 h1、h2 和 p 元素（只留下返回的文本；else if (error) 然后只显示错误消息在页面底部的 div 占位符内，没有 .hide()-ing 任何元素。因此，在 ajax 方法成功后，我希望隐藏除 div 占位符中返回的文本之外的所有元素。如果发生错误（表单留空）然后在 div 占位符中显示错误消息，同时保留所有元素。

更新：

当我在示例中使用警报时，它们总是显示为成功。 ajax/jquery 无法识别我的 if 语句。知道这里可能发生了什么吗？

html：

 <form id="form" action="form.php">
     <label for="name">Name: </label>
     <input type="text" id="name" name="name">

     <label for="phone">Phone: </label>
     <input type="text" id="phone" name="phone">
</form>

<input type="submit" id="clickMe" value="Send" class="clear">

<p id="display"> </p>

jQuery/Ajax

$(document).ready(function() 
    $("#clickMe").click(function(event)
        event.preventDefault();
        var myData = $('#form').serialize();    

        $.ajax(
            url: 'form.php',  
            data: myData,    
            success: function (result) 
                $('#display').html(result);

             if(myData.indexOf("Thank"))
                        alert("success")
                     
            ,
            error: function (xhr, status, error) 
                $('#display').html("Error: " + xhr.status + " " + xhr.statusText);

             if(myData.indexOf("Something went wrong"))

                        alert("error");
                    
            
        );
    ); 
);

PHP

 if(!empty($_GET['name'])

  echo "Thank you for your messsage ";


else 
    echo "Something went wrong.;

【问题讨论】：

什么 CSS/样式？我在您的代码中没有看到任何内容。

你的css在哪里？

@Rens;抱歉，基本上我只想在信息通过服务器并返回后显示部分 html（表单信息）。因此，如果出现错误，我会在页面底部收到一条错误消息，如果成功，我希望隐藏所有内容，但显示（结果）。我尝试使用 $('h1 , h2, #p1, input').hide();" 但即使是错误也会隐藏所有内容。我只希望它在 ajax 成功时隐藏。不确定是否可以使用带有 ajax 选项的条件？？

你能否改变你提出这个问题的方式，这是一个奇怪的问题：“我只希望保留结果，但只保留表单的部分”

很抱歉。我想使用 hide 方法隐藏除了表单返回的结果之外的所有内容。如果出现错误，则不应“隐藏”任何内容。

【参考方案1】：

试试这个

   $('#display').text(result);

希望对你有帮助

我认为添加类更好。例子 在你的 CSS 中

.test background-color:#000000;

成功

  $('#display').addClass("test");

也可以直接添加

$('#display').css('background-color','block');

我认为你的问题出在你的 CSS 中。

你忘了添加你的 ajax。

 type: "post"

【讨论】：

有没有办法将它合并到 ajax 的成功选项中？如果我们成功了，那么它会隐藏除结果和原始 css 之外的所有内容？

这样基本剥离了所有的HTML，跟CSS没多大关系？

什么意思？它会隐藏一切，结果会保留吗？

我想使用 hide 方法隐藏所有内容，但成功后的结果

我修改了我的问题，也许这有帮助？

【参考方案2】：

由于您没有显示任何进行验证的 PHP 代码，我不知道您的代码看起来如何，但您必须执行以下操作：

以下内容应放在form.php 文件的顶部：

if(isset($_POST['name']))

    // return either true/false depending on validation

    // By default set the success message
    $success = true;
    $message = 'My success message';

    // now do your conditional checks and based on that change to false

    // Example: when validation fails on name:
    if($_POST['name']=='')
        $success = false;
        $message = 'My error message: (Name is a required field)';
       

    // convert array to json, so we can read it out nicely on ajax return
    echo json_encode($result);

    // stop rest of our code
    exit;

然后将你的ajax成功改为：

请注意：

从 jQuery 3.0 开始，$.parseJSON 已弃用。要解析 JSON 字符串，请改用本机 JSON.parse 方法。

success: function (result) 
   // Read the json string to proper object, for jQuery 3.0+ use native method instead
   var $data = jQuery.parseJSON(result);

   // Check if there where no validation problems
   if($data.success==true)
       // Write success message to DOM element
       $('#display').html($data.message);
   else
       // Write error message to DOM element
       $('#display').html($data.message);
   
,