为什么错误消息没有显示在.err-msg中?

时间:2019-07-17 12:24:30

标签: javascript php jquery ajax

尝试将JSON数组中的“消息”输出到“ div.err-msg”中。

我正在将JSON数组中的错误消息(response.message)传递到“ div.err-msg”中。但是,整个JSON数组不会出现在控制台日志中,但不会将“消息”输出到div中。

JS:

public DataTable ReadExcel(string fileName, string fileExt, string targetSheet)
        {

            string conn = string.Empty;
            DataTable dtexcel = new DataTable();
            if (fileExt.CompareTo(".xls") == 0)//compare the extension of the file
                conn = @"provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + fileName + ";Extended Properties='Excel 8.0;HRD=Yes;IMEX=1';";//for below excel 2007
            else
                conn = @"Provider=Microsoft.ACE.OLEDB.12.0;Data Source=" + fileName + ";Extended Properties='Excel 12.0;HDR=Yes;IMEX=1';";//for above excel 2007
            using (OleDbConnection con = new OleDbConnection(conn))
            {
                try
                {
                    OleDbDataAdapter oleAdpt = new OleDbDataAdapter(string.Format("select * from [{0}$]", targetSheet), con);//here we read data from sheet1
                    oleAdpt.Fill(dtexcel);//fill excel data into dataTable
                }
                catch (Exception ex)
                {
                    MessageBox.Show(ex.Message.ToString());
                }
            }
            return dtexcel;
        }

PHP(错误消息之一):

$(function() {
  $('.auth-form').on('submit', function(e) {
    e.preventDefault();
    $form = $(this);
    submitForm($form);
  });
});


function submitForm($form){

  $(".err-msg").html('<img src="public/images/ajax-loader.gif">');

  $.ajax({
    url: $form.attr('action'),
    method: $form.attr('method'), 
    data: $form.serialize(),
    success: function(response){
      response = jQuery.parseJSON(response);

      if(response.success){

        if(!response.signout){
          setTimeout(function(){
            $(".err-msg").html(response.message);
            window.location = response.url;
          },5000);
        }

        $(".err-msg").html(response.message);
      } else if(response.error) {
        $(".err-msg").html(response.message);
      }
      console.log(response)
    }
  });
}

我期望“所有字段都是必填项!”放在div.err-msg

如果我没有输入任何字段,然后提交表格。控制台日志显示if($status === 'missing_fields'){ echo json_encode([ 'error' => 'error', 'message' => '<p class="error">All fields mandatory!</p>', ]); } 。它似乎工作良好,但不会{error: "error", message: "<p class="error">All fields mandatory!</p>"} .html()

1 个答案:

答案 0 :(得分:0)

尝试将以下行添加到您的$.ajax调用的选项中:

dataType: 'json',

并对这一行发表评论:

response = jQuery.parseJSON(response);

更新

由于您尚未发布所有代码,因此我无法为您调试它。因此,我改为模拟了您似乎想做的事的演示。请参阅以下代码(经过测试,可以正常运行)。我做了一些小的优化,以指出正确的思维方式。

<?php

if (!empty($_POST))
{
        if (empty($_POST['username']) && empty($_POST['password']))
                $response = ['status' => 'error', 'message' => 'All fields mandatory!'];
        else
        {
                // Validation stuff here.
                $response = ['status' => 'success', 'message' => 'OK!'];
        }

        echo json_encode($response);
        exit;
}

?>
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
label
{
        display: block;
        margin-bottom: 1em;
}
.message
{
        padding: 1em;
        display: none;
        margin-top: 1em;
        border-color: currentColor;
        border: 1px solid;
}
.error
{
        color: red;
}
.success
{
        color: green;
}
</style>
</head>
<body>
<form method="post">
<label>Username<br><input type="text" name="username"></label>
<label>Password<br><input type="password" name="password"></label>
<button type="submit">Login</button>
<div class="message"></div>
</form>
<script>
$('form').submit(
        function (event)
        {
                var $this = $(this);
                var $message = $('.message');

                event.preventDefault();

                $.ajax(
                        {
                                url: $this.attr('action'),
                                method: $this.attr('method'),
                                data: $this.serialize(),
                                dataType: 'json',
                                success: function (response)
                                {
                                        if (response.status == 'success')
                                        {
                                                // Do your success stuff.
                                                $message.addClass('success');
                                        }
                                        if (response.status == 'error')
                                        {
                                                // Do your error stuff.
                                                $message.addClass('error');
                                        }

                                        $message.html(response.message).show();

                                        console.log(response);
                                }
                        }
                );
        }
);
</script>
</body>
</html>