how update data through ajax and jquery

Question

I try to update data through ajax, but it not worked. What I did wrong? Here is jquery ajax code

php code in functions.php

function update_records(){
  global $wpdb;
  echo $id = $_POST['update_record'];
 
   $db_updated = $wpdb->update( $wpdb->prefix.'contact_form', 
        array('names'    => $_POST['update_name'],
              'emails'   => $_POST['update_email'],
              'gender'   => $_POST['update_gender'],
              'age'      => $_POST['update_age']), array( 'ID' => $id ) );
}
add_action( "wp_ajax_update_records", "update_records" );
add_action( "wp_ajax_nopriv_update_records", "update_records" );

jquery ajax code

jQuery('.upd_btn').click(function(){
        var id = jQuery(this).attr('data-id');
         var name = jQuery(this).attr('data-name');
         var email = jQuery(this).attr('data-email');
         var gender = jQuery(this).attr('data-gender');
         var age = jQuery(this).attr('data-age');

        alert(age);

        $.ajax({
            url: '<?php echo admin_url('admin-ajax.php');?>',
            type: 'POST',
            data:{ 
            action: 'display_func', 
              update_record:id,
              // update_name:name,
              // update_email:email,
              // update_gender:gender,
              // update_age:age,
            },
            success: function( data ){
                // alert("Records are successfully update");
                location.reload();
            }
         });
    });

ajax error screenshot - https://prnt.sc/wdon1x

Answer 1

First of all, in your jquery event handler the action parameter's value should be the string after wp_ajax_ and wp_ajax_nopriv_. So in your example the action should be update_records. So display_func is wrong.
Then in line 3 of your php code here the echo keyword should be removed.
So your php code should be like this:

function update_records(){
    global $wpdb;
    $id = $_POST['update_record'];

    $db_updated = $wpdb->update( $wpdb->prefix.'contact_form', 
        array(
            'names'  => $_POST['update_name'],
            'emails' => $_POST['update_email'],
            'gender' => $_POST['update_gender'],
            'age'    => $_POST['update_age']
        ), 
        array( 'ID' => $id ) 
    );
}  
add_action( "wp_ajax_update_records", "update_records" );
add_action( "wp_ajax_nopriv_update_records", "update_records" );

Answer 2

Please sanitize the data before inserting or updating into the database to prevent from attackers Read Documenation:

function update_records(){
    global $wpdb;
    $id = intval(sanitize_text_field($_POST['update_record']));

    $db_updated = $wpdb->update( $wpdb->prefix.'contact_form', 
        array(
            'names'  => sanitize_text_field($_POST['update_name']),
            'emails' => sanitize_email($_POST['update_email']),
            'gender' => sanitize_text_field($_POST['update_gender']),
            'age'    => intval(sanitize_text_field($_POST['update_age']))
        ), 
        array( 'ID' => $id ) 
    );
}  
add_action( "wp_ajax_update_records", "update_records" );
add_action( "wp_ajax_nopriv_update_records", "update_records" );